zTree介紹及相關屬性使用

 

      zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。

具體使用可查看參考網站： http://www.treejs.cn/v3/demo.php#_101  里面有demo說明和api文檔  （http://www.treejs.cn/v3/api.php）

使用前需引入js文件

   <script src="${ctx}/baseui/js/jquery.ztree-override.js"></script>

加載數據 tree = $("#ztree").tree(setting); 

setting 為獲取數據來源，具體見下面示例

function loadTree(){
            var platIndexCode = $('#platIndexCode').val();
            var setting = {
                    ajax : {
                        url : "${ctx}/web/module/caseplan/case/statistics/showOrganizationTree.action?platIndexCode="+platIndexCode,
                        success : function() {
                            expand(tree.getNodes());
                        }
                    },
                    callback : {},
                    check : {
                        enable : true
                    }
                };
                setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
                //只展開type為1的
                function expand(nodes){
                    if(nodes){
                        for(var i=0;i<nodes.length;i++){
                            var node = nodes[i];
                            if(!node.extra.type){
                                tree.expandNode(node,false,false,false,true);
                                expand(node.children);
                            }else{
                                if(node.extra.type == 1){
                                    if(!checkChildType(node.children)){
                                        tree.expandNode(node,false,false,false,true);
                                        expand(node.children);
                                    }
                                }else{
                                    break;
                                }
                            }
                        }
                    }
                }
                
                function checkChildType(nodes){
                    if(nodes){
                        for(var i=0;i<nodes.length;i++){
                            if(nodes[i].extra.type != 1){
                                return true;
                            }
                        }
                        return false
                    }
                    return true;
                }
                tree = $("#ztree").tree(setting);
        }

loadTree（）函數即為加載樹

 

其中屬性：chkboxType 屬性為復選框父子是否關聯設置，具體見官方demo。

• setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };

 

其中：expandNode 屬性為節點收縮和展開屬性設置，具體見app文檔,描述非常詳細

 tree.expandNode(node,false,false,false,true);

 

官網API

 http://www.treejs.cn/v3/api.php