bootstrap-treeview的数据展示与查询。

这里是一个数据资源的展示，一般的，包含父子节点的数据结构类型都可以参考这种方式：

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:"catalogAction!queryMyCatalogList.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>

bootstrap-treeview的数据展示与查询。

猜你喜欢