ztree树的使用记录

zTree 的使用记录的使用记录 zTree 是张其纲老师开发的一款免费的 功能比较全的 js 树形展示插件 本文档记录 使用的 ztree 框架的部分功能的思路 有 异步加载技术 添加复选框 单击节点名实现 功能 更换节点图标 显示如下图 参考张其纲老师的首页实例 地址 http www ztree me v3 demo php 402 页面如下 树已经初始化完 在页面中显示的位置如下 Js 代码 设置树的初始值 var setting async enable true url getUrl data simpleData enable true check 是否支持复选框 enable true callback beforeExpand beforeExpand onAsyncSuccess onAsyncSuccess onAsyncError onAsyncError onCheck onCheck 选中时触发的事情 onClick onClick 单机触发的时间 var log className dark perCount 100 perTime 100 初始化AJAX异步调用时的URL值 function getUrl treeId treeNode var curCount treeNode children treeNode children length 0 var getCount curCount perCount treeNode count treeNode count curCount perCount var param id treeNode id return getNodesForBigData php param AJAX异步交互的地 址 展开节点异步取子节点之前调用的函数 function beforeExpand treeId treeNode if treeNode isAjaxing treeNode times 1 ajaxGetNodes treeNode refresh return true else alert zTree 正在下载数据中 请稍后展开节点 return false AJAX异步交互成功时调用的函数 function onAsyncSuccess event treeId treeNode msg if msg msg length 0 return var zTree fn zTree getZTreeObj treeDemo totalCount treeNode count if treeNode children length 0 clearCheckedNodes 触发进行业务逻辑的处理的信息 当单机选中复选框的时候进行的处理 function onCheck e treeId treeNode var ids var zTree fn zTree getZTreeObj treeDemo nodes zTree getCheckedNodes true for var i 0 l nodes length i l i ids nodes i id if i l 1 ids 把得到的已选择的节点ID集合进行其他处理 清空已经选中的树的数据 function clearCheckedNodes var zTree fn zTree getZTreeObj treeDemo nodes zTree getCheckedNodes true for var i 0 l nodes length i l i nodes i checked false zTree updateNode nodes i 进行树中已经选中的统计的函数 function count var zTree fn zTree getZTreeObj treeDemo checkCount zTree getCheckedNodes true length 所有选中的节点 nocheckCount zTree getCheckedNodes false length 所有未选中 的 changeCount zTree getChangeCheckedNodes length 新更改的节 点 初始化时的树节点信息 var zNodes name 北京 id 3038 checked false isParent true open true name 上海 id 3091 checked false isParent true open true name 上海 1 id 3107 checked false name 天津 id 3040 checked false isParent true open true 初始化页面的树 document ready function fn zTree init treeDemo setting zNodes 说明 异步加载数据时数据返回的样式为 name 复兴路 id 3046 pId 3045 checked false isParent true open true name 啊啊大 id 42 pId 3045 checked false icon website employee img diy 3 png 其中 icon website employee img diy 3 png 为该节点要显示的节点图标 checked false 表示 如果父节点在异步加载前是选中状态则用 checked true 表示 选中 Java 后台编好要向前台显示的 JSON 形式的字符串之后发送的编码为 response setContentType application x jso