1.引入 ztree文件
<link rel="stylesheet" href="${ctx}/static/comp/zTree/css/demo.css" type="text/css"> <link href="${ctx}/static/comp/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script src="${ctx}/static/comp/zTree/js/jquery.ztree.core-3.5.js" type="text/javascript"></script> <script src="${ctx}/static/comp/zTree/js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script> <script type="text/javascript" src="${ctx}/static/comp/zTree/js/jquery.ztree.exedit-3.5.js"></script> <link href="${ctx}/static/comp/zTree/tree.css" rel="stylesheet" type="text/css">
2.非异步
<script type="text/javascript"> var treeJsonS=${treeJson}; var setting = { check: { enable: true, chkboxType:{ "Y" : "ps", "N" : "ps" } }, callback: { onCheck: onCheck } }; function filter(node) { return (node.level == 2 && node.checked == true); } var codeListStr =""; function onCheck(e, treeId, treeNode) { codeListStr =""; var zTreeO=$.fn.zTree.getZTreeObj("tree").getNodesByFilter(filter); for(var i=0;i<zTreeO.length;i++){ if (zTreeO[i].code != undefined) { codeListStr+= (i == (zTreeO.length-1))?zTreeO[i].code:zTreeO[i].code+";"; }; }; $("#userIds").val(codeListStr); } $(document).ready(function () { $.fn.zTree.init($("#tree"), setting,treeJsonS); }); </script> <div class="zTreeDemoBackground left"> <ul id="tree" class="ztree"></ul> </div>
说明:标红第一处:后台的tree数据
标红第二处:tree 节点单击回调函数
标红第三处:过滤三级(一级是0三级是2)节点并且被选中的节点
标红第四处:把节点的code属性 拼接成串
标红第五处:初始化tree,$("#tree")为下边ul
3.异步 获取数据
var setting = { view: { dblClickExpand: false, showTitle: false, nameIsHTML: true, showIcon: false }, async: { enable: true, url: path+"/myDevice/deviceAreaTree" }, callback: { onClick : checkTree } }; $(function (){ $.fn.zTree.init($("#treeDemo"), setting); });
4.刷新 树
function refreshTreeGrid(){ var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); treeObj.reAsyncChildNodes(null, "refresh"); }