Ztree 分批異步加載
本文簡要介紹ztree的分批異步加載，因作者在利用時踩了良多坑，所以寫下來供給給后來者參考。
東西/原料
- vs2015
- ztree
方式/步調
- 1
到ztree的官網下載ztree的js插件，包含js和css兩個部門，然后，將js引入到項目中
- 2
新建頁面，將js與css添加引用到頁面
@Common.HtmlHelper.Css("~/Scripts/viewer/viewer.css", "~/Scripts/ztree/css/demo.css", "~/Scripts/ztree/css/zTreeStyle/zTreeStyle.css")
@Common.HtmlHelper.Script("~/Scripts/ztree/js/jquery.ztree.all.js")
注：Common.HtmlHelper為作者的幫忙類，其感化為添加版本號
- 3
編寫js，添加ztree異步加載的設置裝備擺設，如下
var setting = {
async: {
enable: true,
url: getUrl,
autoParam: ["id", "name"],
dataFilter: filter
},
view: {
showLine: false,
addDiyDom: addDiyDom,
addHoverDom: addHoverDom,
showTitle: true
},
data: {
simpleData: {
enable: true
}
}
};
- 4
添加自界說方式，為ztree加載數據：
unction BindTree()
{
com.ajax({
url: "FirstAnsyData?System_Code=" + System_Code + "&Data_Code=" + Data_Code + "&tabReport=" + tabReport,
type: "post",
contentType: "application/json",
data: {},
dataType: "json",
success: function (res)
{
if (res.ResultFlag == com.AjaxResultFlag.success)
{
queryHandler(res.ResultObj);
var zTree = $.fn.zTree.getZTreeObj("dataTree");
var nodes = zTree.transformToArray(zTree.getNodes());
nodes.forEach(function (value, i)
{
if (value.isparent && value.pId != null) {
value.isParent = value.isparent;
zTree.reAsyncChildNodesPromise(value, "", false);
}
});
}
else
{
com.msg(res.ResultObj);
}
},
error: function (x, y, z)
{
com.msg("操作掉敗");
},
complete: function ()
{
parent.layer.closeAll(); //封閉遮罩層
}
});
}
- 5
添加異步加載時需要請求的參數的處置方式
function getUrl(id, node)
{
var parentcode = node.id;
return "AnsyChildData?System_Code=" + System_Code + "&Data_Code=" + Data_Code + "&tabReport=" + tabReport + "&Quota_Code=" + parentcode;
}
- 6
添加異步伐用后返回數據的過濾處置
//異步過濾數據
function filter(treeId, parentNode, childNodes)
{
return childNodes.ResultObj;
}
- 7
添加初始化ztree的方式
//初始化樹
var zTreeObj = $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
- 8
運行頁面，將會發現有下級節點的呈現loading結果，這就申明已經在異步加載。
- 發表于 2019-08-04 22:05
- 閱讀 ( 1377 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章