java ztree 异步加载,jquery zTree异步加载的例子

下面是使用zTree异步加载的一个例子：

1)初始化树的时候是ajax请求，返回nodes列表来初始化树的；如果一开始就异步的话，$.fn.zTree.init($("#zTree"),setting, data)第三个参数为null就行；

2)后面点击最末端的节点，比如点击单板的时候，开始异步加载；

var nodes =

[

{

'id': 1,

'pid': 0,

'name': '硬件规格',

'open':false

},

{

'id': 10,

'pid': 1,

'name': '单板',

'open':false

},

//比如点击单板+，要异步加载的两个节点，模拟用

{

'id': 100,

'pid': 10,

'name': '单板_00',

'open':false

},

{

'id': 101,

'pid': 10,

'name': '单板_01',

'open':false

},

{

'id': 11,

'pid': 1,

'name': '子卡',

'open':false

},

{

'id': 12,

'pid': 1,

'name': '设备',

'open':false

},

{

'id': 2,

'pid': 0,

'name': '软件规格',

'open':false

},

{

'id': 20,

'pid': 2,

'name': 'java',

'open':false

},

{

'id': 21,

'pid': 2,

'name': 'jscript',

'open':false

},

{

'id': 22,

'pid': 2,

'name': 'php',

'open':false

}

]

index

Ztree异步加载使用例子

var setting = {

async: {

enable: true,

url:"asyncGetNodes",

autoParam:["id", "pid", "name"],

dataFilter: filter

},

data:{

simpleData:{

enable: true,

idKey:'id',

pIdKey:'pid',

rootPId: 0

}

},

view:{

showIcon: false

}

};

$(document).ready(function(){

initZTree();

});

function filter(treeId, parentNode, childNodes) {

return childNodes;

}

//初始化树

function initZTree(){

$.ajax({

url:"getNodes",

type:"post",

dataType: "json",

success: function(data){

console.log(data);

var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data);

//让第一个父节点展开

var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);

zTreeObj.expandNode(rootNode_0, true, false, false, false);

},

error: function(){

}

});

}

@Controllerpublicclass ZtreeController {

@RequestMapping("/getNodes")

@ResponseBody

publicList getNodes()throws Exception{

List nodeList =newArrayList();

nodeList.add(newNode("1","0","硬件规格","false","true"));

nodeList.add(newNode("10","1","单板","false","true"));

nodeList.add(newNode("11","1","子卡","false","true"));

nodeList.add(newNode("12","1","设备","false","true"));

nodeList.add(newNode("2","0","软件规格","false","true"));

nodeList.add(newNode("20","2","java","false","true"));

nodeList.add(newNode("21","2","jscript","false","true"));

nodeList.add(newNode("22","2","php","false","true"));

return nodeList;

}

@RequestMapping("/asyncGetNodes")

@ResponseBody

publicList asyncGetNodes(String id, String pid, String name)throws Exception{

List nodeList =newArrayList();

if(id.equals("10")){

nodeList.add(newNode("100",id,"单板_00","false","false"));

nodeList.add(newNode("101",id,"单板_01","false","false"));

}

Thread.sleep(3000);

return nodeList;

}

}