zTree树状控件--使用基础
简介:
zTree控件是一个依赖于JQuery框架的一个轻量级树状结构显示控件.全称JQuery zTree.
优点:
- 兼容 IE、FireFox、Chrome 等浏览器
- 在一个页面内可同时生成多个 Tree 实例
- 支持 JSON 数据
- 支持一次性静态生成 和 Ajax 异步加载 两种方式
- 支持多种事件响应及反馈
- 支持 Tree 的节点移动、编辑、删除
- 支持任意更换皮肤 / 个性化图标(依靠css)
- 支持极其灵活的 checkbox 或 radio 选择功能
- 简单的参数配置实现 灵活多变的功能
- 控件开源且有很多现成样式
使用:
- 使用zTree需要引入它的依赖文件,分别是JQuery的js文件,zTree的js文件和css文件.
- 在引入zTree的依赖文件后,就可以在页面使用zTree了.
代码示例:
1 <div id="zTreeId" class="zTree"><!--这个div用于显示zTree树状结构--></div>
第一步:在页面中定义一个div,用于加载zTree树.注意:这个控件的class一定要指定为zTree(在zTree的css文件中定义的).
1 $(document).ready(function(){ 2 //在页面静态资源加载完后,去加载zTree树 3 var treeObj = $.fn.zTree.init($("#zTreeId"), setting); 4 });
第二步:在页面静态资源加载完后,运行zTree的核心函数init.函数中的两个参数分别指需要加载zTree控件的页面组件和setting配置信息(包括数据源,树结构的属性等).这个函数还可以传入第三个值,第三个值是一个方法,即加载完的回调函数.
var setting = { async : { //设置 zTree 是否开启异步加载模式,默认值为false enable : true, //仅在enable为ture时有效,用于指定数据加载的地址 url : "XXX.com"+ location.search, //异步加载时需要自动提交父节点属性的参数。 autoParam : [ "id" ], //文件过滤器,参数值是一个函数,用于对 Ajax 返回数据进行预处理的函数。 dataFilter : filter }, view:{ //双击节点时,是否自动展开父节点的标识 dblClickExpand: true, //是否显示节点之间的连线 showLine: true }, callback : { //用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作 beforeExpand: beforeExpand, //用于捕获异步加载正常结束的事件回调函数 onAsyncSuccess:pageInit }, data:{ simpleData: { //确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array).就是使用简单数据格式,默认值false enable: true } } };
第三步:定义setting参数,用于构建树.setting的数据源有两种加载方式,动态加载和静态加载.上面写的是动态加载(静态加载是将数据定义成一个JQuery对象,在传入到init方法中:$("#zTreeId").zTree($("#zTreeId"),setting, treeNodes);
var treeNodes = [ //id:生成的菜单项的id属性,isParent:用于表示这个菜单项是否为目录,name:用于显示这个菜单项的名称,open:用于指定这个目录是否默认打开 {"id":1, "pId":0, "isParent":"true","open":"true","name":"test1"}, {"id":11, "pId":1, "name":"test11"}, //pId:用于指定这个菜单项的父目录,click用于指定这个菜单项的单击回调函数,url:用于打开一个url(这个打开是新页面打开) {"id":12, "pId":1,"click":"XXX","url":"XXX.com","name":"test12"}, {"id":111, "pId":11, "name":"test111"}, ];
注意事项:
常用函数:
//获取一个zTree树对象,使用id获取,但不用写#. var treeOb = $.fn.zTree.getzTreeObj("zTree"); //获取目录的子节点,返回值是一个数组 treeOb.getNodes(); //打开目录,treeOb是整个zTree对象,nodes是需要打开的目录 treeOb.expandNode(nodes); //获取目录的子节点,等价于getNodes() nodes.children;
更多的配置信息和参数详解可以访问zTree的官方文档:http://www.treejs.cn/v3/api.php