Ztree加載完成默認選中根節點右側生成表格

需求：頁面加載完成之后，默認選中ztree的根節點，並執行其點擊方法，右側生成表格；

效果：如下圖所示；

思路：在節點點擊事件clickNode方法中根據節點的部門code查詢這個部門下的所有員工，並在右側渲染layui表格。

function clickNode(e,treeId,treeNode) {
    getUserList(treeNode);
}

function getUserList(treeNode) {
    table.render({
        .....
    });
}

這樣的話在點擊這個節點的時候在右側生成表格是沒有問題的，但是如果想在頁面加載完成之后自動選中這個節點，並在右側生成表格，就需要下面的代碼：

$(document).ready(function() { 
                $.ajax({
                     type : "POST",
                     dataType : "json",
                     url :  "*****",
                     async : false,
                     success : function(data) {
                           zTree = $.fn.zTree.init($("#mytree"),  setting, data);
                           zTree.expandAll(zTree);
                           var treeObj =  $.fn.zTree.getZTreeObj("mytree"); //獲取ztree對象
                           var node =  zTree.getNodeByParam('level', 0); // 獲取根節點
                           treeObj.selectNode(node); // 選擇節點
                           clickNode(null,  zTree.setting.treeId, node); // 調用事件方法
                     },
                     
                     error : function(error) {
                           layer.msg('數據加載失敗！', {
                                icon : 2,
                                time : 1500
                           })
                     }
                });
           });

在加載完成后再執行點擊事件的方法clickNode，理論上是可行的，但是執行代碼的時候就會一直報錯，table is not defined，原來是因為頁面加載順序問題，導致左邊ztree先加載完成需要使用右邊layui的table對象，作如下處理，ztree加載完成之后等待一秒鍾讓layui加載，再執行點擊方法，代碼如下：

$(document).ready(function() {
                $.ajax({
                     type : "POST",
                     dataType : "json",
                     url :  "*****",
                     async : false,
                     success : function(data) {
                           zTree = $.fn.zTree.init($("#mytree"),  setting, data);
                           zTree.expandAll(zTree);
                           var treeObj =  $.fn.zTree.getZTreeObj("mytree");
                           var node =  zTree.getNodeByParam('level', 0);
                           treeObj.selectNode(node); // 選擇點
                           setTimeout(function(){
                                clickNode(null,  zTree.setting.treeId, node); // 調用事件方法
                           },1000);    
                     },
                     error : function(error) {
                           layer.msg('系統錯誤！', {
                                icon : 2,
                                time : 1500
                           })
                     }
                });
           });

update  at 2018-12-17 14:57

今天在測試過程中發現了一個更好的解決方法，layui的回調方法是在$().ready()方法之后執行的，那么也就是說在頁面初始加載的時候如果先執行$().ready()方法里面的內容時可以的，但是如果這個方法里用到了layui里面的組件，那就會出現本文產生的問題。既然layui也是在頁面完成之后再進行加載，那么我就想着這個方法是不是可以代替$().ready()？

layui.config({
            base : '${ctx}/static/layuiadmin/'
        }).extend({
            index : 'lib/index'
        }).use([ 'index', 'table', 'layer', 'form' ], function() {
            var $ = layui.$;
            var form = layui.form;
            table = layui.table;
            form.render();
            
            loadDefaltTable();    
});

function loadDefaltTable() {
 $.ajax({
     type : "POST",
     dataType : "json",
     url :  "*****",
     async : false,
     success : function(data) {
    　　 zTree = $.fn.zTree.init($("#mytree"),  setting, data);
    　　 zTree.expandAll(zTree);
    　　 var treeObj =  $.fn.zTree.getZTreeObj("mytree");
    　　 var node =  zTree.getNodeByParam('level', 0);
    　　 treeObj.selectNode(node); // 選擇點
    　　 clickNode(null,  zTree.setting.treeId, node); // 調用事件方法  
     },
 　　error : function(error) {
        layer.msg('系統錯誤！', {
               icon : 2,
                time : 1500
        })
   }
});

}

於是我把上文的代碼封裝成方法，寫到了layui的回調里，測試一波是可行的。這樣如果頁面上使用了layui的組件時就可以用layui的回調代替$().ready()方法。