首页 > 代码库 > 加载树
加载树
加载树:
* 一次性全部加载
* 和数据库只交互一次
* 会把大量的数据加载到内存中
* 点击事件加载
* 和数据库交互很多次
* 按照需求加载数据
一次性加载树:
* 页面上导入三个文件
* zTreeStyle.css
* jQuery-1.4.2.js
* jquery-ztree.2.5.js
* 在页面上准备树的容器
<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
* 写js代码
$("#tree").zTree(setting,nodes);创建树
点击事件加载树:
* 导入三个文件
* 在页面上准备树的容器
* 加载树的根节点
loadRootNode: function(){
var parameter = {
pid: 0
};
$.post("menuitemAction_showMenuitemsByPid.action", parameter, function(data){
tree.zTree = $("#tree").zTree(tree.setting, data.menuitemList);
});
}
说明
* 因为后面要加载其节点的子节点,要用到tree.zTree属性,所以只要在tree对象中设置一个属性
那么只要在该json对象中,tree.zTree都能访问
* 在其他地方使用tree.zTree时,一定要确保tree.zTree有值了才能使用,因为上面执行的是异步加载
* 点击该节点,加载该节点的子节点
* 触发该节点的+号事件
setting: {
callback: {
expand: function(event, treeId, treeNode){
tree.pNode = treeNode;
tree.loadNodeByPNODE();//加载子节点
}
}
}
loadNodeByPNODE: function(){
var parameter = {
pid: tree.pNode.mid
};
if (!tree.zTree.getNodeByParam("pid", tree.pNode.mid)) {//判断点击的节点是否有子节点
$.post("menuitemAction_showMenuitemsByPid.action", parameter, function(data){
/**
* 把查询出来的子节点追加到父节点上
*/
tree.zTree.addNodes(tree.pNode, data.menuitemList, true);
});
}
}
加载树