zoukankan      html  css  js  c++  java
  • ztree js 和父子节点递归 使用注意

    var zNodes =[
            { "id":1, "pId":0, "name":"父节点1 - 展开", "open":false},
          /*  { id:11, pId:1, name:"父节点11 - 折叠"},
            { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true}*/,
            { "id":2, "pId":0, "name":"父节点2 - 折叠"},
          /*  { id:21, pId:2, name:"父节点21 - 展开", open:true},
            { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}*/
        ];

    起先 子节点跟父挂载不上,都是一个级别. 本想js  弱对大小写不敏感吧,混合了sql对大小写的 实际是误解.

    后来发现传递过来的 pId  写成了 pid ....... 所以注意大小写.

    2: 实体类 只需三个字段即可,加多了, 可能会点不开

        public class MenusItem
            {
                public int id { get; set; }
                public int pId { get; set; }
                public string name { get; set; }
                //public bool open { get; set; }
                //public bool isParent { get; set; }
            }

    3: 不用在意  先后顺序, 只需要id 跟pid 对应好就可以,也无需id 从1开始, 只需把最顶级 的pid 设置为0即可. id 数据查询时可以对应到表id ,pid 对应上级 id

      { "id":1, "pId":0, "name":"父节点1 - 展开", "open":false},
          /*  { id:11, pId:1, name:"父节点11 - 折叠"},
            { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true}*/,
       { "id":2, "pId":0, "name":"父节点2 - 折叠"},

    4:异步展示,在数据量较大时更为合适,也符合 点到加载,减少资源浪费.

     5: 这个其实顺序用不到递归啥的, 数据库一个left join  就可以拼出上边的格式. 得益于没有以上节点没有顺序要求.

    父子递归  父子节点 改改即可 应用到 ztree  另一种非 id pid  name  方式的

    public class  TestClass
    {
        public List<MenuItem> Main = new List<MenuItem>();
        
        public void Enter() //入口
        {
            List<MenuItem> allMenu = GetAllMenus(); //得到数据 
            Main.Add(allMenu.Where(x => x.MenuID == 1).FirstOrDefault());//根节点
            AddMenu(allMenu, allMenu.Where(x => x.MenuID == 1).FirstOrDefault());//递归
            
            //结果树形结构
            List<MenuItem>  treeMenu = Main;
            
        }
        //父子级递归
        public void AddMenu(List<MenuItem> all, MenuItem curItem)
        {
            List<MenuItem> childItems = all.Where(ee => ee.ParentID == curItem.MenuID).ToList(); //得到子节点
            curItem.ChildItems = childItems; //将子节点加入
            
            //遍历子节点,进行递归,寻找子节点的子节点
            foreach (var subItem in childItems)
            {
                AddMenu(all, subItem);
            }
        }
        public List<MenuItem> GetAllMenus() 
        {
            List<MenuItem>() listMenuS = NEW List<MenuItem>();
            // 得到数据
            // 结构如下:
            //  MenuID  DisplayName  ParentID   ChildItems
            //    1        Name1        0                     根节点
            //    2        Name2        1
            //    3        Name3        1
            //    4        Name4        2
            //    5        Name5        2
            
            return listMenuS;
        }
        
    }
     
     
    //数据对象
    public class MenuItem
    {
        public int MenuID { get; set; }
        public string DisplayName { get; set; }
        public int ParentID { get; set; }
        public List<MenuItem> ChildItems { get; set; }
    }
    
    ————————————————
    版权声明:本文为CSDN博主「预立科技」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/sinat_16998945/article/details/78042901
    技术交流qq群:143280841
  • 相关阅读:
    javaScirpt学习之事件
    验证表单内容之后如何阻止表单提交
    利用js制作异步验证ajax方法()
    Ajax制作无刷新评论系统
    ajax查询数据的举例
    以Ajax的方式访问数据库
    jquery中的全局事件
    jquery序列化元素
    jquery中的ajax
    jquery与ajax的应用
  • 原文地址:https://www.cnblogs.com/zuochanzi/p/15042475.html
Copyright © 2011-2022 走看看