zTree异步加载数据,默认展开全部节点


异步加载Tree 想要默认展开全部节点,使用普通的方法是不行的。

例如:

  $(document).ready(function(){
            $.fn.zTree.init($("#areaTree2"), setting3, zNodes3);   
            var treeObj = $.fn.zTree.getZTreeObj("areaTree2");  //得到该tree
            var node = treeObj.getNodeByTId("areaTree2_1");  //选中第一个节点
            treeObj.expandNode(node, true, false, true);  //打开节点 ,第一个参数表示哪个节点,第二个参数表示展开还是关闭,第三个参数表示 是否打开全部子孙节点 
    });

这样使用 expandNode 方法是不能展开异步加载的数据的。


官方demo 中 有一个 异步展开全部节点的 页面 在  \zTree-zTree_v3-2ffc0fa\demo\cn\super\asyncForAll.html 这个页面 


但是他给定的方法不一定适合自己  ,所以我做了一些优化,删除了对自己显示数据没用的方法。

 <input type="button" value="为该角色添加功能" οnclick="addFunction()">
      <ul id="areaTree4" class="ztree"></ul>
</div>
 <script type="text/javascript">
 var setting2 = {
         check: {
                enable: true
            },
         async: { //异步
                enable: true,
                url: getUrl
         },
          data: {//数据
              key: {
                  name: "functionName"          //name
              },
             simpleData: {
                     enable: true,
                     idKey: "functionId",       //id
                     pIdKey: "pid"         //pid
                 }
           },
           callback: {    //回调函数,实现展开功能
                beforeAsync: beforeAsync,
                onAsyncSuccess: onAsyncSuccess,
                onAsyncError: onAsyncError
            }
           
 }
     function getUrl(treeId, treeNode){  //默认注入两个参数,第一个是当前树的名字,第二个是选中的节点
         return "/roleProject/FunctionServlet?dir=getFunctionTree&functionId="+treeNode.functionId+"&roleNo="+key;
     }
     
     function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }
        function beforeAsync() {
            curAsyncCount++;
        }
        
        function onAsyncSuccess(event, treeId, treeNode, msg) {
            curAsyncCount--;
            if (curStatus == "expand") {
                expandNodes(treeNode.children);
            } else if (curStatus == "async") {
                asyncNodes(treeNode.children);
            }
            if (curAsyncCount <= 0) {
                if (curStatus != "init" && curStatus != "") {
                    asyncForAll = true;
                }
                curStatus = "";
            }
        }
        function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
            curAsyncCount--;
            if (curAsyncCount <= 0) {
                curStatus = "";
                if (treeNode!=null) asyncForAll = true;
            }
        }
        var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
        goAsync = false;
        function expandAll() {
        
            var zTree = $.fn.zTree.getZTreeObj("areaTree4");
            if (asyncForAll) {
                
                zTree.expandAll(true);
            } else {
                expandNodes(zTree.getNodes());
                if (!goAsync) {
    
                    curStatus = "";
                }
            }
        }
        function expandNodes(nodes) {
            if (!nodes) return;
            curStatus = "expand";
            var zTree = $.fn.zTree.getZTreeObj("areaTree4");  
            for (var i=0, l=nodes.length; i<l; i++) {
                zTree.expandNode(nodes[i], true, false, false);
                if (nodes[i].isParent && nodes[i].zAsync) {    
                    expandNodes(nodes[i].children);
                } else {
                    goAsync = true;
                }
            }
        }
        
        
     
     var zNodes2=[{functionId:0,functionName:"功能",pid:-1,isParent:true,checked:true}];  
    $(document).ready(function(){
              $.fn.zTree.init($("#areaTree4"), setting2, zNodes2);
             expandAll();  //调用写好的展开全部节点方法
        });
    
    
这段代码 有很高的复用性,只需要传过来的Json对象 正确,使用zTree 完全不需要做改动,即可使用,只要将你自己的属性字段修改就可以了。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
zTree 可以通过记忆上次展开节点来实现默认展开上次打开的节点的功能。具体实现方法如下: 1. 设置 zTree 的 cookie 开关为 true: ```javascript var setting = { view: { ... // 其他配置项 }, data: { ... // 其他配置项 }, callback: { ... // 其他回调函数 }, // 开启 cookie 记忆功能 view: { addDiyDom: null, autoCancelSelected: true, dblClickExpand: true, expandSpeed: "fast", fontCss: {}, nameIsHTML: false, selectedMulti: true, showIcon: true, showLine: true, showTitle: true, txtSelectedEnable: false, // 开启 cookie 记忆功能 rememberSelected: true, // 设置 cookie 记忆的名称 cookieName: "ztree_cookie" } }; ``` 2. 在页面加载时,初始化 zTree 并获取上次记忆的节点: ```javascript $(document).ready(function(){ // 初始化 zTree $.fn.zTree.init($("#treeDemo"), setting, zNodes); // 获取上次记忆的节点 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var cookieValue = $.fn.zTree._getCookie(setting.cookieName); if (cookieValue) { var expandNodes = cookieValue.split(","); // 展开上次记忆的节点 zTree.expandAll(false); for (var i = 0; i < expandNodes.length; i++) { var node = zTree.getNodeByParam("id", expandNodes[i]); if (node != null) { zTree.expandNode(node, true, false, true); } } } }); ``` 3. 在节点展开或关闭时,更新 cookie 中保存的节点: ```javascript var setting = { view: { ... // 其他配置项 }, data: { ... // 其他配置项 }, callback: { onExpand: onExpand, // 节点展开时的回调函数 onCollapse: onCollapse // 节点关闭时的回调函数 }, // 开启 cookie 记忆功能 view: { addDiyDom: null, autoCancelSelected: true, dblClickExpand: true, expandSpeed: "fast", fontCss: {}, nameIsHTML: false, selectedMulti: true, showIcon: true, showLine: true, showTitle: true, txtSelectedEnable: false, // 开启 cookie 记忆功能 rememberSelected: true, // 设置 cookie 记忆的名称 cookieName: "ztree_cookie" } }; function onExpand(event, treeId, treeNode) { // 更新 cookie 中保存的节点 var zTree = $.fn.zTree.getZTreeObj(treeId); var expandNodes = zTree.getNodesByFilter(function(node) { return node.level > 0 && node.open; }); var expandNodesId = []; for (var i = 0; i < expandNodes.length; i++) { expandNodesId.push(expandNodes[i].id); } $.fn.zTree._saveCookie(setting.cookieName, expandNodesId.join(",")); } function onCollapse(event, treeId, treeNode) { // 更新 cookie 中保存的节点 var zTree = $.fn.zTree.getZTreeObj(treeId); var expandNodes = zTree.getNodesByFilter(function(node) { return node.level > 0 && node.open; }); var expandNodesId = []; for (var i = 0; i < expandNodes.length; i++) { expandNodesId.push(expandNodes[i].id); } $.fn.zTree._saveCookie(setting.cookieName, expandNodesId.join(",")); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值