• Ztree使用笔记


    在项目中需要用到树,使用了Ztree。(官网地址:http://www.treejs.cn/v3/main.php#_zTreeInfo,介绍很详细,有API,有demo)

    1.初始化树:   $.fn.zTree.init($("#treeDemo"), setting, zNodes),#treeDemo-放置树的容器ID,setting参数设置,ZNodes初始化的节点;

    2.setting 参数设置如下

    var setting = {      
            check: {
                enable: true//是否显示勾选框
            },
            data: {
                simpleData: {
                    enable: true//确定 zTree 初始化时的节点数据,是否采用简单数据模式 (Array),开启之后,后天直接返回的list可以直接绑定树
                }
            },
            callback: {//各种回调函数
                onDblClick: dblClickNode,           
            }
        };
    

      3.后台自定义类,用来接受树数据,返回给前台绑定树使用,个人觉得这个树结构是很方便的,可以在后台将树处理好,只要是正确的父级ID,绑好数据返回给前台就能用了,基本不用再做其他处理,非常方便

    public class JsTreeModel
        {
            public string id { get; set; }//树id
    
            public string pId { get; set; }//父级id
    
            public string name { get; set; }//名字
    
            public bool open { get; set; }//是否默认展开
    
            public bool isParent { get; set; }//是否是父级节点,异步加载时使用
    
            public bool @checked { get; set; }//是否选中
        }
    

    4.后台处理好数据用上面定义的 JsTreeModel 的List类型接收,返回到前台,直接给树绑定,在前台就能看到完整的树结构了

    5.考虑到树数据量大的问题,需要启用异步加载,只需要在设置参数中添加异步的参数

    var setting = {
            async:{  
                enable: true,
                url: "url",//子节点异步获取的后台方法
                autoParam: ["id", "checked"],//参数,基本树节点自带属性都可以从这里传到后台
                otherParam: { "userlist": userlist, "username": function () { return $("#teachername").val(); } },//其他参数,自定义参数
                dataFilter: filter//过滤器,对后台传回来的数据进行处理后再交给树
            }  ,
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onDblClick: dblClickNode,           
            }
        };
    

     在异步加载的时候出现过几个问题,一是异步方法不进去,发现是父节点没有设置Isparent属性,在初始化的时候,给父节点的isparent属性设置为true,二是子节点不展示,发现时过滤器方法不对,数据没有返回,三是勾选父节点,再进行异步加载,子节点没有被勾选,这个通过异步方法将父节点的选中属性(checked)传到后台,赋值给查询到的子节点就行了,四是自定义参数的问题,在otherParam里面传的参数只是初始值,如果是用户输入之类的参数值,会一直都是空,所有需要使用函数的方式传值,就上面所写到的

    "username": function () { return $("#teachername").val(); }
    

      

  • 相关阅读:
    认识hammer.js
    Mac使用Charles进行HTTPS抓包
    CentOS7下安装Python3及Pip3并保留Python2
    CenOS7.4内核升级修复系统漏洞
    PHP连接不上MySQL解决方案总结
    linux安装redis
    图片上传的两种实现方式
    python笔记6 模块与包 程序开发规范 包 re sys time os模块
    python Image 模块处理图片
    python笔记5 接口类抽象类 封装 反射 设计模式 模块 :random随机数 josn shelve持久化存储
  • 原文地址:https://www.cnblogs.com/huanglin101/p/5760274.html
Copyright © 2020-2023  润新知