1. 程式人生 > >zTree非同步載入資料,預設展開全部節點

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="為該角色新增功能" onclick="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 完全不需要做改動,即可使用,只要將你自己的屬性欄位修改就可以了。

相關推薦

zTree非同步載入資料預設展開全部節點

非同步載入Tree 想要預設展開全部節點,使用普通的方法是不行的。 例如: $(document).ready(function(){ $.fn.zTree.init($("#areaTree2"), setting3, zNodes3);

Ztree非同步逐級載入資料連線資料庫增刪改模糊搜尋

需求是需要做一個國家資訊的樹形結構圖,那麼就避免不了使用樹狀結構的外掛,而用的比較多的外掛就是Ztree和Jstree,個人在這裡強烈推薦Ztree,原因如下:1、Ztree的外掛文件全中文解釋,畢竟是國產外掛,所以對於英語不太好的同學來說,會減少很多麻煩,而Jstree全英

zTree實現非同步載入資料(使用SPRING MVC4+mybatis3.8)

1.先看效果 圖一 初始化狀態 圖二 點選根節點(凱頓兒童美語ERP資訊系統)自動載入第一層子節點(登入、註冊等子節點) 圖三 點選登入子節點會自動載入第三層子節點 2.程式碼 建立一個html檔案interfa

easy-ui 的標籤頁tab預設全部載入只在點選某個標籤時進行載入

$(document).ready(function(){$('#tag_id').tabs({ onSelect:function(title){switch (title){case "待辦列表"

【小程式】分頁載入資料下拉載入更多上拉重新整理

【 小程式】分頁載入資料,下拉載入更多,上拉重新整理 分頁載入的優點就不多說了,下面主要記錄一下幾個問題點。 scroll-view元件不能用在頁面根佈局中,不然觸發不了系統的onPullDownRefresh()、onReachBottom()回撥。 在Page頁

簡單知識點例項之二:如何動態生成div框並且同時非同步載入資料

一、動態生成框並且同時ajax非同步請求資料 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htm

ionic-infinite在隱藏後重新整理頁面重新載入資料無法下拉載入的問題

問題描述: /** * doInfinite上拉載入 */ doInfinite(infinite) { this.index++; this.infinite=infinite

Python非同步載入爬蟲護士私密照源源不斷!請各自備好紙巾!開車

利用aiohttp這個庫來進行 非同步協程提速! 如果Python爬蟲不僅在程式碼編寫上展現速度,而且在爬取過程中表現出優越感,最好的就是去下載圖片吧,而下載圖片最好的代表當然是......我就不多說了。   Python非同步載入爬蟲,護士私照源源不斷,Ajax抓取速度

IE瀏覽器無法載入資料按F12就可以載入

Root cause: 程式碼裡用到console物件,而某些版本的IE不開控制檯,是沒有這個物件的。 因為上下文中沒有console這個物件, 所以就直接拋異常了,但是不開啟控制檯看不到。打開了控制檯,上下文中就有這個物件,所以就不會拋錯了 Action: 1.刪除co

Highcharts 非同步載入資料曲線圖表

一 程式碼 <html> <head> <title>Highcharts 非同步載入資料曲線圖表</title> <script src="http://apps.bdimg.com/libs/jquery/2.1

Echarts的使用,非同步載入資料及返回資料型別

前臺js建立圖形 var option1={ title : { text: '學歷統計', x:'center', y:'center'

selenium和pyquery抓取非同步載入資料

from selenium import webdriver from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By from seleniu

yii2開發筆記---h5上拉載入資料進入詳情頁點選返回上次進入詳情的位置

其他框架和原生都適用 html程式碼: <ul class="list"> <?php if(!empty($model)){foreach ($model as $key) { ?> <li class="line"

spring 啟動載入資料訪問資料庫

首先,說下應用場景。 專案中時常會用到spring專案啟動需要載入一些全域性資料,如訪問資料庫獲取一些基本公共資料,為此就需要在啟動載入時訪問資料,為此,專門研究了一下,發現現在網上能搜到的主要是implements InitializingBean, ServletCon

bootstrap-table外掛無法載入資料原因?

$('#tb_departments').bootstrapTable({ url: url + "dbh/databases/tabletype/table/" + tableId, //請求後臺的URL(*)

H5手機頁面滑動非同步載入資料

怎樣實現手機版的web頁面在滑動的時候非同步載入資料,直接貼程式碼,可以直接新建一個html頁面進行測試哦,注意這裡要引用jQuery外掛 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml

easyui datagrid 非同步載入資料時滾動條有時會自動滾到最底部的問題

在使用easyui 的datagrid非同步載入資料時發現滾動條有時會自動滾到最底部。經測試發現,如果載入資料前沒有選中行則不會出現這個問題。這樣我們可以在重新非同步載入資料前取消選中行就可以避免這個問題。 //easyui datagrid 取消選中行 $("#dg").datagrid("clea

Android Listview滑動時不載入資料停下來時載入資料讓App更優

資料來源配置(Adapter) package com.zhengsonglan.listview_loading.adapter;  import android.content.Context;  import android.view.LayoutInflate

ajax非同步請求資料用bootstrap中的tree模板實現tree

後臺資料格式json資料data: {"0":[{"id":1,"fatherId":0,"typeName":"測試","typeIndex":0,"typeStatus":"1"}], "1":[{"id":2,"fatherId":1,"typeName":"測試類別

ECharts 非同步載入資料及loading 動畫

非同步載入 echarts 示例中的資料是在初始化後setOption中直接填入的,但是很多時候可能資料需要非同步載入後再填入。ECharts 中實現非同步資料的更新非常簡單,在圖表初始化後不管任何時候只要通過 jQuery 等工具非同步獲取資料後通過 setO