Plug-in d'arbre Jquery Utilisation de zTree tutoriel_jquery

Cet article analyse l'utilisation du plug-in d'arbre Jquery zTree avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Recherchez simplement l'introduction à zTree.

L'effet final de cet exemple est le suivant :

Lorsque la souris se déplace vers le répertoire de premier niveau, un lien Tout sélectionner apparaîtra. Cliquez sur le lien Tout sélectionner et tous les sous-éléments du répertoire seront ajoutés à la zone de texte du destinataire. Bien sûr, en cliquant sur un seul. le sous-élément en ajoutera un. C'est à vous de décider quelles informations vous souhaitez ajouter.

1. Téléchargez zTee, introduisez jquery.js dans la page et ajoutez les js et css correspondants de zTree en fonction des exigences fonctionnelles

Copier le code Le code est le suivant :

jquery.ztree.core-3.5.js : paquet de base zTree

jquery.ztree.excheck-3.5.js : package de fonctions de case à cocher

jquery.ztree.exedit-3.5.js : package de fonctions d'édition

Le package principal zTree doit être introduit.
2. Configurez zTree, veuillez consulter les commentaires dans le code pour les instructions individuelles

Informations de configuration de zTree :

Variables : les ID de balise html utilisés dans zTree auront le suffixe suivant ajouté à la fin. Par exemple, les ID des images développées et fermées devant le répertoire de premier niveau sont IDMark_Switch.

Copier le code Le code est le suivant :var IDMark_Switch = "_switch", IDMark_Icon = "_ico",

IDMark_Span = "_span",

IDMark_Input = "_input",
IDMark_Check = "_check",
IDMark_Edit = "_edit",
IDMark_Remove = "_remove",
IDMark_Ul = "_ul",
IDMark_A = "_a" ;

paramètre var = {
Voir : { addHoverDom : addHoverDom,

supprimerHoverDom : supprimerHoverDom
},
Rappel : {
avantClic : avantClic,
onClick : onClick
}  
};
function beforeClick(treeId, treeNode, clickFlag) {
// alerte (treeNode.id);
var ticketBagNo = treeNode.phone; re =new RegExp(ticketBagNo);
var accept = $("#accept").val();//Trouvez l'endroit où vous souhaitez mettre les données et testez si elles existent déjà
Si(!re.test(accepter)){
$("#accept").val(accepter treeNode.name "<" ticketBagNo ">,"); }  
}
function onClick (événement, treeId, treeNode, clickFlag) {
// alerte (clickFlag "zzz");
>


Il existe deux fonctions de rappel dans callback

avantClic :

est utilisé pour capturer la fonction de rappel d'événement avant de vérifier ou de décocher, et détermine s'il faut autoriser la vérification ou la décoche en fonction de la valeur de retour : null

.

onClick :

Fonction de rappel d'événement utilisée pour capturer le nœud sur lequel vous cliquez

Si la méthode beforeClick est définie et renvoie false, la fonction de rappel d'événement onClick ne sera pas déclenchée.

Valeur par défaut : null

addHoverDom est la réaction lorsque la souris se déplace sur le nœud. Ici, nous ajoutons une fonction de sélection totale pour le répertoire de premier niveau :

Copier le code

Le code est le suivant :

function addHoverDom(treeId, treeNode) { 
 si (!treeNode.children)retourne ; 
    if (treeNode.parentNode && treeNode.parentNode.id!=1 ) return; 
    var aObj = $("#" treeNode.tId IDMark_A); 
    if (treeNode.children.length>0) { 
 if ($("#diyBtn1_" treeNode.id).length>0) return; 
 if ($("#diyBtn2_" treeNode.id).length>0) return;//' onclick='allSelect("treeNode ") 
 var editStr = "全选"; 
 aObj.append(editStr); 
 document.getElementById("diyBtn1_" treeNode.id).onclick = function() { 
      allSelect(treeNode); 
 } ; 
    } 
>

全选allSelect方法：

复制代码 代码如下 :

function allSelect(treeNode){ 
    si (!treeNode.children)retourne ; 
    for(i=0;i  var ticketBagNo = treeNode.children[i].phone; 
    re = nouveau RegExp (ticketBagNo);   
    var accept = $("#accept").val();//找到文本框如果该记录未添加就添加 
    if(!re.test(accept)){ 
 $("#accept").val(accepter treeNode.children[i].name "<" ticketBagNo ">,"); 
    } 
    } 
>

supprimerHoverDom：鼠标移除节点所做出的反应，去掉全选

复制代码 代码如下 :

function removeHoverDom(treeId, treeNode) { 
si (!treeNode.children)retourne ; 
$("#diyBtn1_" treeNode.id).unbind().remove(); 
>

zTree节点信息：可以根据需求动态生成。

以下为Demo数据，每个节点中的nom，phone都可以按照自己的需要进行添加或修改，比如你要添加一个年龄：age="23",但是要注意格式问题，这一点是非常方便。

复制代码 代码如下 :

var zNodes =[ 
    {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开 
 enfants :[ 
  {id:2,name:"测试老师",phone:"123456789101"}, 
  {id :3,nom :"大老师",téléphone :"15623545621"} 
 ] 
    }, 
    {id:4,name:"一班",open:true, 
 enfants :[ 
      
   {id :5,nom :"小花",téléphone :"25364215211"}, 
  {id :6,nom :"小绿",téléphone :"365241253"} 
  }, 

  {id:7,name:"二班",open:true, 
 enfants :[ 
      
   {id :8,nom :"小家",téléphone :"25364215211"}, 
  {id :9,nom :"小沙",téléphone :"365241253"} 
   } 
];

以下是我用jsp从服务动态生成树的例子,不需要可以忽略，我留着以后参考的。

复制代码 代码如下 :

/*var zNodes =[ 
 
    {id:1,name:"所有老师",open:false, 
 enfants :[ 
   
  {id:,name:" ",phone:""},  
  {id:,name:" ",phone:""}< ;/s:si> 
   
 ] 
    }, 
     
 
     
    {id:,name:"",open:true, 
 enfants :[ 
      
   {id:,name:"",phone:""}, 
  {id:,name :"",phone :""} 
      
     ]}, 
     ]} 
     
 
];*/

准备就绪。初始化树要显示的地方，

复制代码 代码如下 :

$(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), paramètre, zNodes); 
});

希望本文所述对大家的javascript程序设计有所帮助。