Ztree使用方法.docx

Z tree 使用方法 1. 首先在页面上有< ul/ > 标签< ul id = "tree" class = "ztree" ></ ul > 2. 定义 ztree 的配置参数 var setting ={ view :{ selectedMulti : false }, data :{ key :{ title : "valuesName" , name : "valuesName" }, simpleData :{ enable : true , idKey : "dataValues" , pIdKey : "parentId" } }, check :{ enable : false }, callback :{ onClick : onClick } }; 以上是常用配置, 具体参见 ztree api 的 setting 部分 3. 获得 ztree 所要绑定的数据, 可以使固定数据也可以使 ajax 获取的数据 a) Ztree 的数据有两种格式, 标准格式如下: o 标准的 JSON 数据需要嵌套表示节点的父子包含关系例如: var nodes =[ {name: "父节点 1",open:true, children: [ {name: "子节点 1"}, {name: "子节点 2"} ]} ]; b) 简单数据格式如下( 推荐使用): o 简单模式的 JSON 数据需要使用 id/ pId 表示节点的父子包含关系,如使用其他属性设置父子关联关系请参考 内各项说明例如: var nodes =[ {id:1, pId:0, name: "父节点 1"}, {id:11, pId:1, name: "子节点 1"}, {id:12, pId:1, name: "子节点 2"} ]; 简单数据的 id ,pId,name,title 都可以在 setting 的 data 中进行配置, 指定相应的字段在 setting 的 data 中配置 simpleData 为 enable :true 即表示使用简单数据格式, 不配置或配置为 false 则为标准数据格式. var setting ={ data: { simpleData: { enable: true }} }; 4. 初始化 ztree 生成树$.($("#tree"), setting, nodes); 第一个参数是< ul/>id 选择的 jquery 对象, 第二个参数是配置的 setting , 第三个参数是获取到的数据. 例子: HTML 中< ul id = "tree" class = "ztree" ></ ul > Js中 var setting ={ view :{ selectedMulti : false }, data :{ key :{ title : "valuesName" , name : "valuesName" }, simpleData :{ enable : true , idKey : "dataValues" , pIdKey : "parentId" } }, check :{ enable : false }, callback :{ onClick