Maison > interface Web > js tutoriel > jquery ztree implémente la fonction de recherche arborescente_jquery

jquery ztree implémente la fonction de recherche arborescente_jquery

WBOY
Libérer: 2016-05-16 15:13:39
original
1385 Les gens l'ont consulté

L'exemple de cet article partage la fonction de recherche arborescente implémentée par jquery ztree pour votre référence. Le contenu spécifique est le suivant

.
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 
  } 
}; 
Copier après la connexion

Ajoutez un attribut ici : view : {fontCss: getFontCss}
Voici une méthode de getFontCss écrite pour moi :

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

De cette façon, la fonction de changement de couleur peut être réalisée
; Ensuite, vous devez ajouter une zone de saisie de recherche au-dessus de l'arborescence d'affichage que vous avez écrite :

<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>
Copier après la connexion

Ici vous pouvez voir que la méthode changeColor est appelée :

//使用搜索数据 加高亮显示功能,需要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); 
Copier après la connexion

est la fonction ztree récupérée ;
C'est ok et la fonction de recherche peut être implémentée.

Ce qui précède contient les informations pertinentes sur l'implémentation de ztree de la fonction de recherche arborescente analysées pour tout le monde. J'espère que cela pourra aider tout le monde à apprendre.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal