1. 程式人生 > >zTree學習日誌 選中指定節點

zTree學習日誌 選中指定節點

ESS root EDA 加載 ctx rest admin set www

ztree文檔地址:http://www.treejs.cn/v3/api.php

1.根據節點的id值獲取節點,需要註意idkey與getNodeByParam("屬性值", id, null); 屬性值一致,不然根據節點id選中節點可能會報ztree Cannot read property ‘chkDisabled‘ of null的錯

獲取node: var node = zTreeObj.getNodeByParam("idResources", id, null);
需要註意 idResources 是setting配置中
            data : {
                simpleData : {
                    enable : true,
                    idKey : ‘idResources‘,
                    pIdKey : ‘idParent‘,
                    rootPId : null
                }
            },
idKey 後面的值,而idKey 後面的值則是 ajax返回值中用於作為節點id的屬性值
/***初始化樹方法開始*****/
        function initZTree() {
            $.ajax({
                url : "${ctx }/admin/super-manage/role/initResTree",
                type : "post",
                dataType : "json",
                success : function(data) {
                      console.log(data);
                      //var dataObj =  JSON.parse(data);
                    var zTreeObj = $.fn.zTree.init($("#zTree"), setting, data);
                    zTreeObj.expandAll(true);
                    showSelectRes();
                },
                error : function() {
                    $.jBox.tip("加載資源失敗!"); 
                }
            });
        }
        /***初始化樹方法結束*****/

2.根據指定id值選中(checked)節點有兩種方法

  (1):zTree.checkNode(node, true, true);//其中node為node對象

  (2):node.checked = true;
    zTree.updateNode(node); //註:設置checked屬性之後,一定要更新該節點,否則會出現只有鼠標滑過的時候節點才被選中的情況(參考:https://blog.csdn.net/u013305082/article/details/51133193/)

  需要註意:如果沒有特意設置(1)跟(2)的區別在於使用(1) 會出現如果(1)節點下有子節點,則這個方法會連同其子節點一並勾選,而(2)方法則不會

idResources為setting配置中 data 裏面的  idKey : ‘idResources‘,
        /*******選中指定id的ztree開始*******/
        function checkedNodeBYId(id){
            var zTreeObj = $.fn.zTree.getZTreeObj("zTree");
            var node = zTreeObj.getNodeByParam("idResources", id, null);
            node.checked = true;
            zTreeObj.updateNode(node); 
        }
        /*******選中指定id的ztree結束***********/

zTree學習日誌 選中指定節點