Java-jquery easyui tree 怎么动态生成 求给个例子
struts的action中用response写回去一个json数据串就行了，按照easyui tree的格式
实际就是一次ajax请求，得到一个json格式的数据
-
使用easyui 需要页面引用必须的js和css // easyui tree 一般只需要url一个属性即可显示数据，tree会自动ajax加载数据// 至于点击树节点如何显示相应页面 ，tree 的json数据格式里面有attributes 可以自定义url//就像下面例子中的 \"attributes\":{\"jsUrl\"……，下面的列子 是我在js里面拼接的tree json数据/*********************************************************************************/ /*初始化树*/ InitTree: function () { /*初始化树*/ $('#tree').tree({ animate: true, //lines: true, checkbox: false, data: TableToXml.TreeData(), onContextMenu: function (e, node) { e.preventDefault(); //阻止浏览器默认右键菜单 // select the node if (node.id != -1 && node.id != -2 && node.id != -3) { $('#txt_xml').attr('disabled', 'true'); $('#btn_save').linkbutton('disable'); TableToXml.currtableName = node.id; TableToXml.currJsUrl = node.attributes.jsUrl; $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } } }); }, //组合树json数据 TreeData: function () { var TreeJson = '[{\"id\":-1,\"text\":\"Tables\",\"children\":['; TreeJson += '{\"id\":-2,\"text\":\"废水污染源核算\",\"children\":['; for (var j = 0; j < TableToXml.tableArray[0].length; j++) { TreeJson += '{\"id\":\"' + TableToXml.tableArray[0][j].split('$')[0] + '\",\"text\":\"' + TableToXml.tableArray[0][j].split('$')[1] + '\",\"attributes\":{\"jsUrl\":\"' + TableToXml.tableArray[0][j].split('$')[2] + '\"}}'; if (j < TableToXml.tableArray[0].length - 1) TreeJson += ','; } TreeJson += ']},'; TreeJson += '{\"id\":-3,\"text\":\"废气污染源核算\",\"state\": \"closed\",\"children\":['; for (var j = 0; j < TableToXml.tableArray[1].length; j++) { TreeJson += '{\"id\":\"' + TableToXml.tableArray[1][j].split('$')[0] + '\",\"text\":\"' + TableToXml.tableArray[1][j].split('$')[1] + '\",\"attributes\":{\"jsUrl\":\"' + TableToXml.tableArray[1][j].split('$')[2] + '\"}}'; if (j < TableToXml.tableArray[1].length - 1) TreeJson += ','; } TreeJson += ']}]}]'; TreeJson = eval("(" + TreeJson + ")"); return TreeJson; },
另附API里tree
$('#tt').tree({ url: ...,//tree会自动ajax后台获取json格式数据(需要自己后台拼接) loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } });多看看api吧……
jQuery EasyUI的官方文档上有实际的代码。
$("#your_tree_id").tree({
data: [
{},
{}
]
});
关键是你的数组要遵照jQuery EasyUI的格式：
[{
"id": 1,
"text": "Node 1",
"state": "closed",
"children": [{
"id": 11,
"text": "Node 11"
},{
"id": 12,
"text": "Node 12"
}]
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]
