这里是一个数据资源的展示,一般的,包含父子节点的数据结构类型都可以参考这种方式:
var root = [ {
"text" : "根目录",
"obj_type" : 1, // means dir. has children.
"path" : "x",
"id" : 0,
} ];
var map = new Map(); //缓存所有节点信息, key为id。 value为tree的element对象。
var catalogMap = new Map(); //缓存所有资源, key为id。 value为catalog对象。
var catalogList; //缓存所有资源 List
refreshTree(); //刷新树
/**
* 刷新树
*/
function refreshTree(){
$("#searchName").val("");
$("#searchCode").val("");
$.ajax({
//这里的查询是根据父节点id升序查询的,根据父节点id一定比其子节点id小的规则。即:加载子节点时,其父节点必定已经加载的规则,只需一次循环。
url:"xxAction!xx.action",
dataType:"json",
success:function(ret){
var list = ret.catalogList;
catalogList = list;
map.set(0,root[0]);
var array = new Array();
if(list!=null)
for(var i=0;i<list.length;i++){
//element 节点
var e = {
"id":list[i].id,
"pId":list[i].parentId,
"text":list[i].name,
"obj_type":list[i].type
};
if(list[i].type==1){
e.nodes=[];
}
map.set(list[i].id,e);
catalogMap.set(list[i].id,list[i]);
array.push(e);
if(i < list.length-1 && list[i].parentId != list[i+1].parentId){
//给其父节点赋值
if(map.get(list[i].parentId)!=null){
map.get(list[i].parentId).nodes=array;
}
var array = new Array();
}else if(i == list.length -1){
//给其父节点赋值,这是最后一个节点
if(map.get(list[i].parentId)!=null){
map.get(list[i].parentId).nodes=array;
}
}
}
//渲染 树
updateTree();
},
error:function(){
alert("获取资源信息失败。");
}
});
}
/**
* 查询功能
*/
function searchByNameAndCode(){
var searchName =$("#searchName").val();
var searchCode =$("#searchCode").val();
root[0].nodes=[]; //初始化nodes,无查询结果时,只展示根目录。
var tempMap = new Map(); //局部缓存,用于保存查询结果树的信息。 element对象
tempMap.set(0,root[0]);
for(var i=0;i<catalogList.length;i++){
if(catalogList[i].name == null || catalogList[i].name.indexOf(searchName)==-1){
continue; //不包含文本
}
if(catalogList[i].code == null || catalogList[i].code.indexOf(searchCode)==-1){
continue; //不包含文本
}
//element 节点
var e = {
"id":catalogList[i].id,
"pId":catalogList[i].parentId,
"text":catalogList[i].name,
"obj_type":catalogList[i].type
};
if(catalogList[i].type==1){
e.nodes=[];
}
addToTree(tempMap,e); //将节点添加至树中。
}
//渲染 树
updateTree();
}
//插入树节点中
function addToTree(tempMap,e){
if(tempMap.get(e.id)!=null){
return; //自身已经被添加过了,则其父节点都已被添加过。
}
tempMap.set(e.id,e);
var pe = tempMap.get(e.pId)
if(pe!=null){
pe.nodes.push(e); //局部缓存存在,表示这不是第一个符合查询条件的节点,向其节点中增加该节点。
}else if(pe == null && map.get(e.pId)!= null){
pe = map.get(e.pId); //从全局缓存获取
var array = new Array();
array.push(e)
pe.nodes = array; //局部缓存不存在,表示这是第一个符合查询条件的节点
}else if(map.get(e.pId)==null){
return; //如果全局缓存中都不存在该节点的父节点,说明该节点是冗余数据。
}
if(pe.id != 0){
addToTree(tempMap,pe); //如果父节点pe不是根节点,则将父节点继续添加至该树
}
}
/**
* 刷新树, 树的定义
*/
function updateTree() {
$('#tree').treeview({
data : root,
showBorder : false
});
//
$('#tree').on('nodeSelected', function(event, data) {
//data为节点信息
//updateResource(data);
});
$('#tree').on('nodeUnselected', function(event, data) {
// 无特殊处理
});
$('#tree').on('nodeExpanded', function(event, data) {
// 无特殊处理
});
$('#tree').on('nodeCollapsed', function(event, data) {
// 无特殊处理
});
}
简单的html页面:
<div style="float:left;margin-top:5px;">
<div style="padding-top: 5px; padding-bottom: 5px; padding-left: 8px;">
<form id="searchForm" style="text-align: left;">
<div style="padding-left: 8px;">
<label for="searchName">名称:</label> <input type="text"
id="searchName" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
placeholder="输入名称">
</div>
<div style="padding-left: 18px;">
<label for="searchCode">编码:</label> <input type="text"
id="searchCode" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
placeholder="输入编码">
</div>
<button type="button" style="margin-left:15px;"
onClick="searchByNameAndCode()">查询</button>
</form>
</div>
</div>
<div id="tree"></div>