ztree异步加载1

ztree的使用主要有官方的api，其中主要是json字符串在页面上进行展示。json字符串包含

“标准json“和”简单json“。

标准json：

var nodes = [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]}
];

简单json：

var nodes = [
	{id:1, pId:0, name: "父节点1"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];

异步加载：

var setting = {

view: {

selectedMulti: false //设置按住ctrl 节点是否多选

},

data: {

simpleData: {

enable:true,//开启简单数据

idKey: "id",//设置json串里面的属性

pIdKey: "pId",

rootPId: ""

}

},

async: {

enable: true,//是否异步加载，true为开启

url:"s",

autoParam:["id"],//json串父节点的参数名称，每一次加载都是根据不同的参数

otherParam:{"otherParam":"zTreeAsyncTest"},//加载静态参数

dataFilter: filter//异步返回时，对返回字符串进行处理

},

callback: {

beforeClick: beforeClick,//单击事件之前，如果为true则促发单击事件

beforeAsync: beforeAsync,//事件加载之前，如果为true则出发异步加载

onAsyncError: onAsyncError,//加载错误

onAsyncSuccess: onAsyncSuccess//加载成功

}

};

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 beforeClick(treeId, treeNode) {

if (!treeNode.isParent) {

alert("请选择父节点");

return false;

} else {

return true;

}

}

function beforeAsync(treeId, treeNode) {

return true;

}

function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {

}

function onAsyncSuccess(event, treeId, treeNode, msg) {

alert(treeId);

alert(msg);

}

$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting);

});

注意：异步加载可以执行多次，首次加入ztree的页面执行异步加载，如果单击某个父节点可以展开子节点，再一次执行异步加载，并且可以把相应的返回json串，自动拼接到该父节点下面。非常好用。