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

简介:

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

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

可能有一个树型结构的表,它可能有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级无限下拉列表框就做好了,呵呵!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:树型结构~无限级联下拉列表框,如需转载请自行联系原博主。

目录
相关文章
带有上下级关系的数据改为树形菜单的数据
带有上下级关系的数据改为树形菜单的数据
54 0
|
缓存 JSON NoSQL
分类树菜单,我从2s优化到0.1s
分类树菜单,我从2s优化到0.1s
|
JavaScript
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
树形组件(可动态添加属性、无限嵌套)及递归展示tree数据
PowerDesigner16:显示工具栏、物理模型绘制表之间关系、设计图导出成图片
PowerDesigner16:显示工具栏、物理模型绘制表之间关系、设计图导出成图片
585 0
PowerDesigner16:显示工具栏、物理模型绘制表之间关系、设计图导出成图片
|
Web App开发 API 数据库
零代码实现一对一表关系和无限主子表级联保存
本文主要介绍一对一关系和无限主子表在crudapi系统中的应用。一对一关系是指关系数据库中两个表之间的一种关系。关系数据库中第一个表中的单个行只可以与第二个表中的一个行相关,且第二个表中的一个行也只可以与第一个表中的一个行相关。
310 0
零代码实现一对一表关系和无限主子表级联保存
|
Web App开发 SQL JavaScript
【自然框架】分享 n级联动下拉列表框
  特点:1、 使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。2、 支持n级。3、 封装成了服务器控件,所以使用非常简单。4、 支持在回发的时候保持状态。5、 支持修改记录的时候设置默认选项。
1261 0
系统思考的层级结构
系统思考的层级结构 系统思考是用来分析各种因素的交互影响,每一个要素都不是孤立存在的,要素对周围的环境有影响,周围的环境也对要素有影响,要素本身就可以看做一个系统,而各种要素互相影响,组成了大一些的系统,大一些的系统互相影响,形成了更大的系统,从而产生了层级性(如图3-12所示)。
1100 0
|
前端开发 容器 Web App开发