zoukankan      html  css  js  c++  java
  • 树型结构~无限级联下拉列表框

    返回目录

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

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

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

    返回目录

  • 相关阅读:
    【网络/通信】概念的理解 —— 带宽、吞吐量、净荷
    在线视频教程
    Topological Spaces(拓扑空间)
    Topological Spaces(拓扑空间)
    open ball、closed ball 与 open set、closed set(interior point,limit point)、dense set
    open ball、closed ball 与 open set、closed set(interior point,limit point)、dense set
    python 书籍推荐 三
    python 书籍推荐 二
    python 书籍推荐 一
    2015年你需要了解的15门编程语言
  • 原文地址:https://www.cnblogs.com/lori/p/2626162.html
Copyright © 2011-2022 走看看