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

今天我們來學習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  感謝站長