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(); }

  

posted @ 2016-08-11 11:19  hello_myworld  阅读(548)  评论(0编辑  收藏  举报