最近碰到一个需求,需要点击叶子节点后从远程加载数据并动态创建子节点。下面给出示例代码:
var zTree;//构建的树对象
var treeNodes=[];//节点数组
//zTree的配置
var setting = {
view: {
dblClickExpand: false,//双击节点时,是否自动展开父节点的标识
showLine: true,//是否显示节点之间的连线
fontCss:{'color':'#009688'},//字体样式函数
selectedMulti: false //设置是否允许同时选中多个节点
},
check:{
enable: false //每个节点上是否显示 CheckBox
},
callback: {
beforeClick: function(treeId, treeNode) {
//点击节点后从远程加载数据并创建子节点
loadNodes(treeNode,treeNode.name,treeNode.country);
}
}
};
function loadNodes(parentNode) {
if(parentNode==null) { //父节点为空,需要创建树
treeNodes=[];//重置节点
treeNodes.push({ id: '0', pid: '0', isParent: true, name: '根节点'}); //创建根节点
zTree=$.fn.zTree.init($("#ktree"), setting, treeNodes);//建立树
parentNode=zTree.getNodes()[0];//获取根节点
}
$.post("/xxx", {paramName:'paramValue'},function(resp) {
if(resp.code===0) {
$.each(resp.data,function(i,e) {
//增加子节点
zTree.addNodes(parentNode,{ id: node.id+'-'+i, pid: node.id, isParent: false, name: e});
}
}
});
}
//建立树对象并创建根节点
loadNodes(null);
上面的例子修改了链接和参数,请自行调整。
全部评论