ajax 加载树插件,jQuery zTree树插件动态加载实例代码

需求：

由于项目中家谱图数据量超大，而一般加载方式是通过，页面加载时 zTree.init方法进行数据加载，将所有数据一次性加载到页面中。而在项目中家谱级别又非常广而深，成千上万级，因此一次加载，完全加载不出来。于是需要进行优化为动态加载(增量加载)的方式，以便数据加载，提高体验度。

解决断路：

这应该好办，只要找到父节点单击事件，然后进行数据加载，结点附加即可。时间紧，任务重，完全没给研究的时间。只能硬着上，随便搜索一个“zTree动态加载”，出是出来了，标题也对，可里面的代码根本没找到添加结点一说……一边是需求催，一边是没找到类似。无语……对啊，不是有官网，于是把所有api函数浏览一遍，终于发现一个叫addNodes的函数。喜！

控件代码

脚本代码(实现结点展开、单击事件时进行动态加载)：

var zNodes;

var zTree;

$(function () {

$.ajax({

cache: true,

type: "get",

url: "/User/NextLeve",

async: false,

success: function (data) {

zNodes = data;

},

error: function (data) {

alert("error");

}

});

zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes);

zTree.expandAll(false);

})

var setting = {

view: {

nameIsHTML: true

},

data: {

simpleData: {

enable: true

},

keep: {

parent: true

}

},

open: false,

callback: {

onClick: nodeClick,

onExpand: function (event, treeId, treeNode) {

addSubNode(treeNode);

}

}

};

function showIconForTree(treeId, treeNode) {

return !treeNode.isParent;

};

function searchM() {

var username = $("#txtName").val()

}

function nodeClick(event, treeId, treeNode, clickFlag) {

addSubNode(treeNode);

}

function addSubNode(treeNode) {

if (!treeNode.isParent) return;

var s = treeNode.children;

if (s != undefined)

return;

$.ajax({

cache: true,

type: "get",

url: "/User/NextLeve",

data: { userId: treeNode.id },

async: true,

success: function (data) {

zTree.addNodes(treeNode, data);

},

error: function (data) {

alert("error");

}

});

}

其中后端请求：

其中数据来源为请求路径“/User/NextLeve?userId=xxx”，为返回如下结构的列表的json数据(即List类型的.ToJson()数据)，其中userId可为，为空时默认取当前登录用户：

public class UserNode

{

public long id { get; set; }

public long pId { get; set; }

public string name { get; set; }

public bool open { get; set; }

public bool isParent { get; set; }

public string icon { get; set; }

}

效果，则实现为单击父结点/展开父结点时动态加载子结点。

以上所述是小编给大家介绍的jQuery zTree树插件动态加载效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！