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

时间:2022-05-21 12:00:37

返回目录

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

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

可能有一个树型结构的表,它可能有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 </script>


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         #endregion

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 @Html.Raw(ViewData["edit"].ToString())

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级无限下拉列表框就做好了,呵呵!

返回目录