jquery ztree實現樹的搜尋功能，jqueryztree

jquery ztree實現樹的搜尋功能，jqueryztree

本文執行個體分享了jquery ztree實現樹的搜尋功能，供大家參考，具體內容如下

var userZTree; var userSetting={   check: {    enable: true,    chkStyle: "radio",    chkboxType : {"Y" : "" , "N" : ""},    radioType: "all"   },   data: {    simpleData: {     enable: true,     idKey : "id",     pIdKey : "pid"    }   },   callback:{    onClick : clickCheck   },   view :{    showIcon: false,    fontCss: getFontCss   } }; 

這裡要加一個屬性：view：{fontCss：getFontCss}
這裡的getFontCss為自己寫的一個方法：

function getFontCss(treeId, treeNode) {  return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } 

這樣就可以實現變色功能了；
接下來 要在自己寫的顯示樹上方加一個搜尋輸入框：

<div id="userDiv" class="showParentDiv showDiv" style="z-index:105;display: none;">   <div class="grayBg">    <div class="toolbar">    <input type="button" value=" <s:text name='button.submit'/> " onclick="submitUser();"/>    <input type="button" value=" <s:text name='button.cancel'/> " onclick="closeUserDiv();"/>     <input type="button" value=" 建立 " onclick="toAddDiv();"/>   </div>   </div>   <div style="text-align:left;margin:5px;height: 15px;">按名字過濾：<input type="text" id="dicKey" onkeyup="changeColor('userTree','name',this.value)"/></div>   <ul id="userTree" class="ztree" style="height:350px; overflow-y:scroll;"></ul> </div>

這裡可以看到調用了changeColor方法：

//使用搜尋資料 加高亮顯示功能，需要2步 //1.在tree的setting 的view 設定裡面加上 fontCss: getFontCss 設定 //2.在ztree容器上方，添加一個文字框，並添加onkeyup事件，該事件調用固定方法 changeColor(id,key,value） // id指ztree容器的id，一般為ul，key是指按ztree節點的資料的哪個屬性為條件來過濾,value是指過濾條件，該過濾為模糊過濾 function changeColor(id,key,value){  treeId = id;  updateNodes(false);  if(value != ""){   var treeObj = $.fn.zTree.getZTreeObj(treeId);   nodeList = treeObj.getNodesByParamFuzzy(key, value);   if(nodeList && nodeList.length>0){    updateNodes(true);   }  } } function updateNodes(highlight) {  var treeObj = $.fn.zTree.getZTreeObj(treeId);  for( var i=0; i<nodeList.length; i++) {   nodeList[i].highlight = highlight;   treeObj.updateNode(nodeList[i]);  } } treeObj.getNodesByParamFuzzy(key, value); 

是檢索的ztree函數；
這樣就ok了 ，可以實現搜尋功能了。

以上就是為大家分析的ztree實現樹的搜尋功能的相關資料，希望能夠對大家的學習。

您可能感興趣的文章:

• jquery zTree非同步載入簡單一實例分享
• struts2+jquery+json實現非同步載入資料(自寫)
• JQuery非同步載入無限下拉框級聯功能實現樣本
• jquery ztree實現下拉樹形框使用到了json資料
• 無限樹Jquery外掛程式zTree的常用功能特性總結
• Jquery樹外掛程式zTree用法入門教程
• json+jQuery實現的無限級樹形菜單效果代碼
• 輕鬆學習jQuery外掛程式EasyUI EasyUI建立樹形菜單
• JQuery ztree 非同步載入執行個體講解
• jQuery使用zTree外掛程式實現樹形菜單和非同步載入