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