如何使用zTree点击节点后从远程加载数据并动态创建子节点?

码云
2020-11-16 15:56

最近碰到一个需求,需要点击叶子节点后从远程加载数据并动态创建子节点。下面给出示例代码:

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);

 

上面的例子修改了链接和参数,请自行调整。

全部评论

相关文章