Jquery Ajax非同步載入資料和Ztree內建非同步載入資料

來源:互聯網
上載者:User
今天我們來學習Ztree非同步載入資料的。我測試的全國城市資料有大概3900條。
 
我測試了一下Jquery 內建的$.ajax方法和Ztree的setting的async參數,效能上毫秒層級的,但是Ztree的setting的async參數效能上更好一些。
如圖:
Ztree的setting的async參數說明:
autoParam:非同步載入時需要自動認可父節點屬性的參數。[setting.async.enable = true 時生效]
預設值:[ ]. 這個提交是ztree內建的一個屬性的參數。記住。
contentType:和jquery contentType的一樣
dataFilter:資料過濾函數,可以不要
dataType:和jquery dataType的一樣
enable:是否非同步。true 表示 開啟 非同步載入模式
false 表示 關閉 非同步載入模式
如果設定為 true,請務必設定 setting.async 內的其它參數。
如果需要根節點也非同步載入,初始化時 treeNodes 參數設定為 null 即可。
 
otherParam:這個是我們可以自訂的參數了。直接用 JSON 格式製作索引值對,例如:{ key1:value1, key2:value2 }   otherParam: {  "oper":"city" } 
type:和jquery type的一樣
url:服務地址。設定固定的非同步載入 url 字串,請注意地址的路徑,確保頁面能正常載入。
url 內也可以帶參數,這些參數就只能是通過 get 方式提交了,並且請注意進行轉碼
一些jquery的參數可以參考:[jquery $.ajax()實現Post資料到服務端]
 
 
我是使用了時間戳記做了一下對比:

 

 代碼如下 複製代碼
  
var
 
begin = (
new
 
Date()).valueOf(); ;;
   
$(
"#beginztree"
).html(begin);
   
$.fn.zTree.init($(
"#treeDemoztree"
), setting);
   
var
 
endztree = (
new
 
Date()).valueOf(); ;;
   
$(
"#endztree"
).html(endztree-begin);

本次測試僅代表我當前環境的。

 

上代碼:

 代碼如下 複製代碼

var AjaxUrl = "service/Cityhandler.ashx";

     $(document).ready(function () {

        $('#tab-container').easytabs(); GetCityZtree();

        GetCity();   

});

 

//擷取測試類型統計資料

function GetCity() {

    var begin = (new Date()).valueOf(); ;;

    $("#begin").html(begin);

    $.ajax({

        type: "post",

        dataType: "json", traditional: true,

        data: { oper: "city" },

        url: AjaxUrl,

        async: true,//表示同步執行

        success: function (data, textStatus) {

            if (data != null) {

                

                $.fn.zTree.init($("#treeDemo"), setting, data);

                var end = (new Date()).valueOf(); ;;

                $("#end").html(end - begin);

            }

        },

        complete: function (XMLHttpRequest, textStatus) { },

        error: function (e) {

 

            

            alert("擷取測試類型統計資料失敗,請重新整理頁面重新載入!");

        }

    });

}

var setting = {

    async: {

        enable: true,

        url: AjaxUrl,

        autoParam: [ ["id"],["zid"] ],

        otherParam: {  "oper":"city" }

    }

};

 

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 GetCityZtree() {

    var begin = (new Date()).valueOf(); ;;

    $("#beginztree").html(begin);

    $.fn.zTree.init($("#treeDemoztree"), setting);

    var endztree = (new Date()).valueOf(); ;;

    $("#endztree").html(endztree-begin);

}

原文來自:http://www.suchso.com/projecteactual/ztree-jiaocheng-aspnet-demo-ashx-jquery-ajax-ztree-setting-async.html  感謝站長

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.