Jquery tree plug-in tutorial_jquery penggunaan zTree

Artikel ini menganalisis penggunaan pemalam pokok Jquery zTree dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Hanya cari pengenalan kepada zTree.

Kesan akhir contoh ini adalah seperti berikut:

Apabila tetikus bergerak ke direktori peringkat pertama, pautan pilih semua akan muncul. Klik pautan pilih semua dan semua sub-item dalam direktori akan ditambahkan ke kotak teks penerima, dengan mengklik pada satu sub-item akan menambah satu. Terpulang kepada anda untuk memutuskan maklumat yang ingin anda tambahkan.

1. Muat turun zTee, perkenalkan jquery.js ke dalam halaman dan tambahkan js dan css zTree yang sepadan mengikut keperluan fungsian

Salin kod Kod adalah seperti berikut:

jquery.ztree.core-3.5.js: Pakej teras zTree

jquery.ztree.excheck-3.5.js: Pakej fungsi kotak semak

jquery.ztree.exedit-3.5.js: Menyunting pakej fungsi

Pakej teras zTree mesti diperkenalkan.
2. Konfigurasikan zTree, sila lihat ulasan dalam kod untuk arahan individu

Maklumat persediaan zTree:

Pembolehubah: ID teg html yang digunakan dalam zTree akan ditambah dengan akhiran berikut sebagai contoh, ID imej yang dikembangkan dan ditutup di hadapan direktori peringkat pertama ialah IDMark_Switch.

Salin kod Kod adalah seperti berikut: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";
tetapan var = {
Lihat: {
addHoverDom: addHoverDom, removeHoverDom: removeHoverDom

},
Panggilan balik: {
sebelumKlik: sebelumKlik,
onClick: onClick
}  
};
fungsi beforeClick(treeId, treeNode, clickFlag) {
//alert(treeNode.id); var ticketBagNo = treeNode.phone; re =new RegExp(ticketBagNo); var accept = $("#accept").val();//Cari tempat anda ingin meletakkan data dan uji sama ada data itu sudah wujud
If(!re.test(accept)){
$("#accept").val(accept treeNode.name "<" ticketBagNo ">,"); }  
}
fungsi onClick(event, treeId, treeNode, clickFlag) {
//alert(clickFlag "zzz");
}


Terdapat dua fungsi panggil balik dalam panggil balik

sebelum Klik:

digunakan untuk menangkap fungsi panggil balik acara sebelum menyemak atau menyahtanda, dan menentukan sama ada untuk membenarkan penyemakan atau nyahtanda berdasarkan nilai lalai: null

padaKlik:

Fungsi panggil balik acara digunakan untuk menangkap nod yang diklik

Jika kaedah beforeClick ditetapkan dan mengembalikan palsu, fungsi panggil balik acara onClick tidak akan dicetuskan.

Nilai lalai: null

addHoverDom ialah tindak balas apabila tetikus bergerak ke atas nod Di sini kami menambah fungsi pilih-semua untuk direktori peringkat pertama ialah fungsi:

Salin kod

Kod adalah seperti berikut:

fungsi addHoverDom(treeId, treeNode) { 
 jika (!treeNode.children)kembali; 
    jika (treeNode.parentNode && treeNode.parentNode.id!=1 ) kembali; 
    var aObj = $("#" treeNode.tId IDMark_A); 
    jika (treeNode.children.length>0) { 
 jika ($("#diyBtn1_" treeNode.id).length>0) kembali; 
 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方法：

复制代码 代码如下:

fungsikan semuaPilih(Nod pokok){ 
    jika (!treeNode.children)kembali; 
    untuk(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 ">,"); 
    } 
    } 
}

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

复制代码 代码如下:

fungsi removeHoverDom(treeId, treeNode) {>  $("#diyBtn1_" treeNode.id).unbind().remove(); 
}

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

nama龄：age="23",但是要注意格式问题，这一点是非常方便。

复制代码 代码如下:var zNodes =[ 

    {id:1,name:"所有老师",open:false,//这里false为默认关闭,true打开 

 kanak-kanak:[ 
  {id:2,name:"测试老师",telefon:"123456789101"}, 
  {id:3,name:"大老师",telefon:"15623545621"} 
 ] 
    }, 
    {id:4,name:"一班",buka:true, 
 kanak-kanak:[ 
      
   {id:5,name:"小花",telefon:"25364215211"}, 
  {id:6,name:"小绿",telefon:"365241253"} 
  }, 

  {id:7,name:"二班",buka:true,   kanak-kanak:[ 

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

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

复制代码 代码如下:

/*var zNodes =[ 
 
    {id:1,name:"所有老师",buka:false, 
 kanak-kanak:[ 
   
  {id:,name:" ",phone:""},  
  {id:,name:" ",phone:""}< ;/s:jika> 
   
 ] 
    }, 
     
 
     
    {id:,name:"",open:true, 
 kanak-kanak:[ 
      
   {id:,name:"",telefon:""}, 
  {id:,name:"",phone:""} 
      
     ]}, 
     ]} 
     
 
];*/

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

复制代码 代码如下:

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

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