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()方法。