Jquery-Baum-Plug-in zTree-Nutzung Tutorial

Jquery-Baum-Plug-in zTree-Nutzung Tutorial_jquery

WBOY

Freigeben： 2016-05-16 16:13:46

Original

1391 Leute haben es durchsucht

In diesem Artikel wird die Verwendung des JQuery-Tree-Plug-Ins zTree anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Suchen Sie einfach nach der Einführung in zTree.

Der Endeffekt dieses Beispiels ist wie folgt:

Wenn sich die Maus zum Verzeichnis der ersten Ebene bewegt, erscheint der Link „Alle auswählen“ und alle Unterelemente im Verzeichnis werden dem Textfeld des Empfängers hinzugefügt Unterpunkt fügt einen hinzu. Es liegt an Ihnen, zu entscheiden, welche Informationen Sie hinzufügen möchten.

1. Laden Sie zTee herunter, fügen Sie jquery.js in die Seite ein und fügen Sie die entsprechenden js und css von zTree entsprechend den funktionalen Anforderungen hinzu

Code kopieren Der Code lautet wie folgt:

jquery.ztree.core-3.5.js: zTree-Kernpaket

jquery.ztree.excheck-3.5.js: Checkbox-Funktionspaket

jquery.ztree.exedit-3.5.js: Funktionspaket bearbeiten

Das zTree-Kernpaket muss eingeführt werden.
2. Konfigurieren Sie zTree, individuelle Anweisungen finden Sie in den Kommentaren im Code

zTree-Setup-Informationen:

Variablen: Den in zTree verwendeten HTML-Tag-IDs wird am Ende das folgende Suffix hinzugefügt. Die IDs der erweiterten und geschlossenen Bilder vor dem Verzeichnis der ersten Ebene lauten beispielsweise IDMark_Switch.

Code kopieren Der Code lautet wie folgt: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";
Var-Einstellung = {
Ansicht: {
addHoverDom: addHoverDom, RemoveHoverDom: RemoveHoverDom

},
Rückruf: {
beforeClick: beforeClick,
onClick: onClick
}
};
Funktion beforeClick(treeId, treeNode, clickFlag) {
//alert(treeNode.id);
var ticketBagNo = treeNode.phone; re =new RegExp(ticketBagNo);
var Accept = $("#accept").val();//Finden Sie den Ort, an dem Sie die Daten ablegen möchten, und testen Sie, ob sie bereits vorhanden sind
If(!re.test(accept)){
$("#accept").val(accept treeNode.name "<" ticketBagNo ">,"); }
}
Funktion onClick(event, treeId, treeNode, clickFlag) {
//alert(clickFlag "zzz");
}

Im Callback gibt es zwei Rückruffunktionen

beforeClick:

wird verwendet, um die Ereignisrückruffunktion vor dem Aktivieren oder Deaktivieren zu erfassen, und bestimmt anhand des Rückgabewerts, ob das Aktivieren oder Deaktivieren zulässig ist onClick:

Ereignisrückruffunktion zur Erfassung des angeklickten Knotens

Wenn die beforeClick-Methode festgelegt ist und „false“ zurückgibt, wird die Rückruffunktion für das onClick-Ereignis nicht ausgelöst.

Standardwert: null

addHoverDom ist die Reaktion, wenn sich die Maus über den Knoten bewegt. Hier fügen wir eine Funktion zum Auswählen aller Elemente für das Verzeichnis der ersten Ebene hinzu:

Code kopieren

Der Code lautet wie folgt:

Funktion addHoverDom(treeId, treeNode) {
if (!treeNode.children)return;
    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){  

    if (!treeNode.children)return;  

    for(i=0;i
 var ticketBagNo = treeNode.children[i].phone;  

    re =new RegExp(ticketBagNo);    

    var Accept = $("#accept").val();//找到文本框如果该记录未添加就添加  

    if(!re.test(accept)){  

 $("#accept").val(accept treeNode.children[i].name "<" ticketBagNo ">,");  

    }  

    }  

}

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

复制代码代码如下:

function removeHoverDom(treeId, treeNode) {  

if (!treeNode.children)return;  

$("#diyBtn1_" treeNode.id).unbind().remove();  

}

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

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

复制代码代码如下:

var zNodes =[
    {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开
Kinder:[
  {id:2,name:"测试老师",phone:"123456789101"},
  {id:3,name:"大老师",Telefon:"15623545621"}
]
    },
    {id:4,name:"一班",open:true,
Kinder:[

   {id:5,name:"小花",phone:"25364215211"},
  {id:6,name:"小绿",phone:"365241253"}
  },

  {id:7,name:"二班",open:true,
Kinder:[

   {id:8,name:"小家",phone:"25364215211"},
  {id:9,name:"小沙",phone:"365241253"}
   }
];

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

复制代码代码如下:

/*var zNodes =[  

    {id:1,name:"所有老师",open:false,  

 Kinder:[  

  {id:,name:" ",phone:""},   

  {id:,name:" ",phone:""}< ;/s:if>  

 ]  

    },  

    {id:,name:"",open:true,  

 Kinder:[  

   {id:,name:"",phone:""},  

  {id:,name:"",phone:""}  

     ]},  

     ]}  

];*/

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

复制代码代码如下:

$(document).ready(function(){  

    $.fn.zTree.init($("#treeDemo"), Setting, zNodes);  

});

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