Rumah > hujung hadapan web > tutorial js > jquery ztree melaksanakan fungsi carian pokok_jquery

jquery ztree melaksanakan fungsi carian pokok_jquery

WBOY
Lepaskan: 2016-05-16 15:13:39
asal
1398 orang telah melayarinya

Contoh dalam artikel ini berkongsi fungsi carian pokok yang dilaksanakan oleh jquery ztree untuk rujukan anda. Kandungan khusus adalah seperti berikut

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 
  } 
}; 
Salin selepas log masuk

Tambahkan atribut di sini: view: {fontCss: getFontCss}
Berikut ialah kaedah getFontCss yang ditulis untuk diri saya sendiri:

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

Dengan cara ini, fungsi menukar warna dapat direalisasikan; Seterusnya, tambahkan kotak input carian di atas pokok paparan yang anda tulis:

<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>
Salin selepas log masuk
Di sini anda boleh melihat bahawa kaedah changeColor dipanggil:


//使用搜索数据 加高亮显示功能,需要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); 
Salin selepas log masuk
ialah fungsi ztree diambil semula; Ini ok dan fungsi carian boleh dilaksanakan.


Di atas ialah maklumat yang berkaitan tentang pelaksanaan ztree bagi fungsi carian pokok yang dianalisis untuk semua orang, saya harap ia dapat membantu semua orang belajar.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan