jquery ztree實現(xiàn)模糊搜索功能
更新時間：2016年02月25日 10:11:08 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了jquery ztree實現(xiàn)模糊搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文分享了jquery ztree實現(xiàn)模糊搜索功能兩個實例，供大家參考，具體內(nèi)容如下
ztree官方demo代碼里的:
根據(jù)參數(shù)查找節(jié)點
以上文件修改成如下代碼
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
<SCRIPT type="text/javascript">
var setting = {
data: {
key: {
title: "t"
},
simpleData: {
enable: true
}
}
};
var zNodes =[
{ id:1, pId:0, name:"節(jié)點屬性搜索演示 1", t:"id=1"},
{ id:11, pId:1, name:"關(guān)鍵字可以是名字", t:"id=11"},
{ id:12, pId:1, name:"關(guān)鍵字可以是level", t:"id=12"},
{ id:13, pId:1, name:"關(guān)鍵字可以是id", t:"id=13"},
{ id:14, pId:1, name:"關(guān)鍵字可以是各種屬性", t:"id=14"},
{ id:2, pId:0, name:"節(jié)點搜索演示 2", t:"id=2"},
{ id:21, pId:2, name:"可以只搜索一個節(jié)點", t:"id=21"},
{ id:22, pId:2, name:"可以搜索節(jié)點集合", t:"id=22"},
{ id:23, pId:2, name:"搜我吧", t:"id=23"},
{ id:3, pId:0, name:"節(jié)點搜索演示 3", t:"id=3"},
{ id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
{ id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
{ id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
];
function focusKey(e) {
if (key.hasClass("empty")) {
key.removeClass("empty");
}
}
function blurKey(e) {
if (key.get(0).value === "") {
key.addClass("empty");
}
}
var lastValue = "", nodeList = [], fontCss = {};
function clickRadio(e) {
lastValue = "";
searchNode(e);
}
function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (!$("#getNodesByFilter").attr("checked")) {
var value = $.trim(key.get(0).value);
var keyType = "";
if ($("#name").attr("checked")) {
keyType = "name";
} else if ($("#level").attr("checked")) {
keyType = "level";
value = parseInt(value);
} else if ($("#id").attr("checked")) {
keyType = "id";
value = parseInt(value);
}
if (key.hasClass("empty")) {
value = "";
}
if (lastValue === value) return;
lastValue = value;
if (value === "") {
zTree.showNodes(zTree.transformToArray(zTree.getNodes())) ;
return;
}
if ($("#getNodeByParam").attr("checked")) {
var node = zTree.getNodeByParam(keyType, value);
if (node === null) {
nodeList = [];
} else {
nodeList = [node];
}
} else if ($("#getNodesByParam").attr("checked")) {
nodeList = zTree.getNodesByParam(keyType, value);
} else if ($("#getNodesByParamFuzzy").attr("checked")) {
nodeList = zTree.getNodesByParamFuzzy(keyType, value);
}
} else {
updateNodes(false);
nodeList = zTree.getNodesByFilter(filter);
}
/**不查詢父級
for(var x = 0 ; x<nodeList.length ; x++){
if(nodeList[x].isParent){
nodeList.splice(x--,1);
}
}
*/
nodeList = zTree.transformToArray(nodeList);
updateNodes(true);
}
function updateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var allNode = zTree.transformToArray(zTree.getNodes());
zTree.hideNodes(allNode);
for(var n in nodeList){
findParent(zTree,nodeList[n]);
}
zTree.showNodes(nodeList);
}
function findParent(zTree,node){
zTree.expandNode(node,true,false,false);
var pNode = node.getParentNode();
if(pNode != null){
nodeList.push(pNode);
findParent(zTree,pNode);
}
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
function filter(node) {
return !node.isParent && node.isFirstNode;
}
var key;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
key = $("#key");
key.bind("focus", focusKey)
.bind("blur", blurKey)
.bind("propertychange", searchNode)
.bind("input", searchNode);
$("#name").bind("change", clickRadio);
$("#level").bind("change", clickRadio);
$("#id").bind("change", clickRadio);
$("#getNodeByParam").bind("change", clickRadio);
$("#getNodesByParam").bind("change", clickRadio);
$("#getNodesByParamFuzzy").bind("change", clickRadio);
$("#getNodesByFilter").bind("change", clickRadio);
});
</SCRIPT>
</HEAD>
<BODY>
<h1>根據(jù)參數(shù)查找節(jié)點</h1>
<h6>[ 文件路徑: core/searchNodes.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作說明</h2>
<ul class="list">
<li class="highlight_red">使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法，詳細(xì)請參見 API 文檔中的相關(guān)內(nèi)容</li>
<li><p>搜索試試看：<br/>
屬性值( value )：<input type="text" id="key" value="" class="empty" /><br/>
屬性( key )：<input type="radio" id="name" name="keyType" class="radio first" checked /><span>name (string)</span><br/>
<input type="radio" id="level" name="keyType" class="radio" style="margin-left:68px;" /><span>level (number) ... 根節(jié)點 level = 0</span><br/>
<input type="radio" id="id" name="keyType" class="radio" style="margin-left:68px;" /><span>id (number)</span><br/>
方法：<input type="radio" id="getNodeByParam" name="funType" class="radio first" /><span>getNodeByParam</span><br/>
<input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/>
<input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/>
<input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (參考本頁源碼中 function filter)</span><br/>
</p>
</li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息說明</h2>
<ul class="list">
<li>不需要對 setting 進(jìn)行特殊設(shè)置</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 節(jié)點數(shù)據(jù)說明</h2>
<ul class="list">
<li class="highlight_red">請注意各個方法使用時保證傳入查找的參數(shù)類型與設(shè)定要查找的屬性的類型一致</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
這樣就簡單的實現(xiàn)了模糊搜索顯示的功能了。
第二個Ztree樹結(jié)構(gòu)模糊搜索實現(xiàn)方法，具體內(nèi)容如下
function expand_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
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') {
//根節(jié)點：展開 treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根節(jié)點：收起 treeObj.expandNode(nodes[i], false, true, false);
}
}
}
function search_ztree(treeId, searchConditionId){
searchByFlag_ztree(treeId, searchConditionId, "");
}
function searchByFlag_ztree(treeId, searchConditionId, flag){
//<1>.搜索條件 var searchCondition = $('#' + searchConditionId).val();
//<2>.得到模糊匹配搜索條件的節(jié)點數(shù)組集合 var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮顯示并展示【指定節(jié)點s】 highlightAndExpand_ztree(treeId, highlightNodes, flag);
}
function highlightAndExpand_ztree(treeId, highlightNodes, flag){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把全部節(jié)點更新為普通樣式 var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起樹, 只展開根節(jié)點下的一級節(jié)點 close_ztree(treeId);
//<3>.把指定節(jié)點的樣式更新為高亮顯示，并展開 if (highlightNodes != null) {
for (var i = 0; i < highlightNodes.length; i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//高亮顯示節(jié)點，并展開 highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節(jié)點的父節(jié)點的父節(jié)點....直到根節(jié)點，并展示 var parentNode = highlightNodes[i].getParentNode();
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
} else {
//高亮顯示節(jié)點，并展開 highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮顯示節(jié)點的父節(jié)點的父節(jié)點....直到根節(jié)點，并展示 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) {
//根節(jié)點 return {color:"#333", "font-weight":"bold"};
} else if (treeNode.isParent == false){
//葉子節(jié)點 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
} else {
//父節(jié)點 return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
}
//==============HTML==============
class="padd" style="padding-bottom: 0px;">
class="input-append row-fluid" style="margin-bottom: 0px;">
"search_condition" type="text" placeholder="請輸入搜索條件" class="span8" style="font-size:12px"/>
"button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索
"dep_tree" class="ztree">
更多關(guān)于ztree控件的內(nèi)容，請參考專題《jQuery插件ztree使用匯總》 。
以上就是jquery ztree實現(xiàn)模糊搜索功能的代碼，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要介紹了Jquery實現(xiàn)遮罩層的方法,詳細(xì)的分析了jQuery實現(xiàn)遮罩層的步驟與相關(guān)技巧,需要的朋友可以參考下2015-06-06
下面介紹自己寫的一個jQuery圓角的插件，功能非常簡單。目前只能實現(xiàn)1px的固定弧度的圓角矩形邊框。2010-10-10
這篇文章主要介紹了jQuery制作可自定義大小的拼圖游戲的代碼，非常的簡單實用，雖然還只是局限于數(shù)字順序的拼圖，后續(xù)慢慢完善上圖片，但還是分享給大家，有需要的小伙伴可以參考下。2015-03-03
對于我們的用途，jQuery是一個更合適。 該js中 的功能更難以配置，這是需要我們的處理的，這是很難定義。2010-08-08
這篇文章主要介紹了使用jquery插件qrcode生成二維碼的方法，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery里prev()的簡單操作代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了jQuery中:animated選擇器用法,實例分析了:animated選擇器的功能、定義及匹配動畫效果元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jquery中one()方法的用法,實例分析了one()方法的功能及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
由于很多知識都已經(jīng)做了詳細(xì)介紹，本節(jié)只介紹需要修改的代碼，使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù)，web.xml、后臺的servet都不用改2011-10-10
jquery簡單實現(xiàn)滾動條下拉DIV固定在頭部不動
滾動條下拉DIV固定在頭部不動效果，想必很多的朋友都有見到過吧，下面為大家詳細(xì)介紹下使用jquery是如何實現(xiàn)的，感興趣的朋友可以參考下2013-11-11