使用zTree進行目錄搜索
百度時候找到了這一篇,膜拜
http://www.oschina.net/code/snippet_565465_33862
留個紀念
很有幫助
/**
* 展開樹
* @param treeId
*/
function expand_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
/**
* 收起樹:只展開根節點下的一級節點
* @param treeId
*/
function close_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.transformToArray(treeObj.getNodes());
var nodeLength = nodes.length;
for (var i = 0; i < nodeLength; i++) {
if (nodes[i].id == '0') {
//根節點:展開
treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根節點:收起
treeObj.expandNode(nodes[i], false, true, false);
}
}
}
/**
* 搜索樹,高亮顯示並展示【模糊匹配搜索條件的節點s】
* @param treeId
* @param searchConditionId 文本框的id
*/
function search_ztree(treeId, searchConditionId){
searchByFlag_ztree(treeId, searchConditionId, "");
}
/**
* 搜索樹,高亮顯示並展示【模糊匹配搜索條件的節點s】
* @param treeId
* @param searchConditionId 搜索條件Id
* @param flag 需要高亮顯示的節點標識
*/
function searchByFlag_ztree(treeId, searchConditionId, flag){
//<1>.搜索條件
var searchCondition = $('#' + searchConditionId).val();
//<2>.得到模糊匹配搜索條件的節點數組集合
var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮顯示並展示【指定節點s】
highlightAndExpand_ztree(treeId, highlightNodes, flag);
}
/**
* 高亮顯示並展示【指定節點s】
* @param treeId
* @param highlightNodes 需要高亮顯示的節點數組
* @param flag 需要高亮顯示的節點標識
*/
function highlightAndExpand_ztree(treeId, highlightNodes, flag){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把全部節點更新爲普通樣式
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起樹, 只展開根節點下的一級節點
close_ztree(treeId);
//<3>.把指定節點的樣式更新爲高亮顯示,並展開
if (highlightNodes != null) {
for (var i = 0; i < highlightNodes.length; i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//高亮顯示節點,並展開
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節點的父節點的父節點....直到根節點,並展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
} else {
//高亮顯示節點,並展開
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節點的父節點的父節點....直到根節點,並展示
var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
}
}
}
/**
* 遞歸得到指定節點的父節點的父節點....直到根節點
*/
function getParentNodes_ztree(treeId, node){
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var parentNode = node.getParentNode();
return getParentNodes_ztree(treeId, parentNode);
} else {
return node;
}
}
/**
* 設置樹節點字體樣式
*/
function setFontCss_ztree(treeId, treeNode) {
if (treeNode.id == 0) {
//根節點
return {color:"#333", "font-weight":"bold"};
} else if (treeNode.isParent == false){
//葉子節點
return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
} else {
//父節點
return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
}