​返回目录​

这个问题困扰了我很久,今天终于把它解决了,心中的喜悦可想而知,赶快把它记录一下

标题无限级联下拉列表框的含义:

可能有一个树型结构的表,它可能有ID,Name,ParentID,Level等字段,下面要实现的就是从一级节点开始,一级一级的列出来,并以

下拉列表框的形式体现出来,就像是N级联动。

效果图:

树型结构~无限级联下拉列表框_级联

两个问题:

1 建立操作时的联动,它不需要进行自动绑定

2 编辑操作时的联运,它需要根据子节点,逐级自己绑定到父节点,直到根

实现:

JS代码

1 <script type="text/javascript">
2 function areaOnSelect(obj) {
3 var res = '';
4 $.ajax({ url: '@Url.Action("GetSubTree")',
5 type: 'GET',
6 data: { parentId: obj.value },
7 success: function (msg) {
8 $(obj).nextAll().remove();
9 res = "<select name='Sub' onchange='areaOnSelect(this)'>";
10 res += "<option value=''>请选择</option>";
11 $.each(msg, function (i, item) {
12 res += "<option value='" + item["ID"] + "'>" + item["Name"] + "</option>";
13 });
14 res += "</select>";
15 if ($(res).find("option").size() > 1)
16 $(obj).after(res);
17 }
18 });
19 }
20

C#代码:

1     #region 树型结构相关
2 /// <summary>
3 /// 递归找老祖宗
4 /// </summary>
5 /// <param name="father"></param>
6 void GetFather(SubItem father)
7 {
8 if (father != null)
9 {
10 father.Parent = _subList.FirstOrDefault(i => i.ID == father.ParentID);
11 GetFather(father.Parent);
12 }
13 }
14
15 /// <summary>
16 /// 弟妹找子孙
17 /// </summary>
18 /// <param name="father">父对象</param>
19 void getSons(SubItem father)
20 {
21 if (father != null)
22 {
23 father.Sons = _subList.Where(item =>
24 item.ParentID.Equals(father.ID)).ToList();
25 father.Sons.ForEach(item =>
26 {
27 item.Parent = father;
28 getSons(item);
29 });
30 }
31 }
32
33
34

C#拼接下拉列表框相关:

1       /// <summary>
2 /// 递归得到它的所有祖宗以selectlist的形式进行拼接
3 /// </summary>
4 /// <param name="son"></param>
5 /// <param name="sbr"></param>
6 void getSelectList(SubItem son, StringBuilder sbr)
7 {
8 StringBuilder inSbr = new StringBuilder();
9 if (son != null)
10 {
11 if (son.ParentID == 0)
12 inSbr.Append("<select name='Parent' onchange = 'areaOnSelect(this)' >");
13 else
14 inSbr.Append("<select name='Sub'>");
15 GetCommon_CategoryByLevel(son.Level).ToList().ForEach(i =>
16 {
17 if (i.ID == son.ID)
18 inSbr.Append("<option value='" + i.ID + "' selected='true'>" + i.Name + "</option>");
19 else
20 inSbr.Append("<option value='" + i.ID + "'>" + i.Name + "</option>");
21 });
22
23 inSbr.Append("</select>");
24 sbr.Insert(0, inSbr);
25 getSelectList(son.Parent, sbr);
26 }
27

C#得到同一深度的节点(同辈节点)相关:

1      /// <summary>
2 /// 得到指定深度的列表
3 /// </summary>
4 /// <param name="level"></param>
5 /// <returns></returns>
6 public List<SubItem> GetCommon_CategoryByLevel(int level)
7 {
8 var linq = from data1 in _subList
9 join data2 in _subList on data1.ParentID equals data2.ID into list
10 select new SubItem
11 {
12 ID = data1.ID,
13 Level = data1.Level,
14 Name = data1.Name,
15 Parent = list.FirstOrDefault(),
16 ParentID = data1.ParentID,
17 };
18 return linq.Where(i => i.Level.Equals(level)).ToList();
19

MVC页面action相关:

1       public ActionResult Category(int? id)
2 {
3 ViewData["Parent"] = new SelectList(_subList.Where(i => i.ID == (id ?? 0)), "ID", "Name", id ?? 1);
4 SubItem current = _subList.FirstOrDefault(i => i.ID == (id ?? 1));
5 GetFather(current);
6 StringBuilder sbr = new StringBuilder();
7 getSelectList(current, sbr);
8 ViewData["edit"] = sbr.ToString();//修改时,进行绑定
9 return View();
10

MVC页面代码相关:

1

C#树型结构实体类相关:

1     /// <summary>
2 /// 树型分类结构
3 /// </summary>
4 public class Category
5 {
6 /// <summary>
7 /// 父ID
8 /// </summary>
9 public int ParentID { get; set; }
10 /// <summary>
11 /// 树ID
12 /// </summary>
13 public int ID { get; set; }
14 /// <summary>
15 /// 树名称
16 /// </summary>
17 public string Name { get; set; }
18 /// <summary>
19 /// 深度
20 /// </summary>
21 public int Level { get; set; }
22 /// <summary>
23 /// 子孙节点
24 /// </summary>
25 public List<Category> Sons { get; set; }
26 /// <summary>
27 /// 父节点
28 /// </summary>
29 public Category Parent { get; set; }
30

好了,现在我们的N级无限下拉列表框就做好了,呵呵!

​返回目录​

作者:仓储大叔,张占岭,
荣誉:微软MVP