Jquery樹外掛zTree用法入門教程_jquery

本文實例分析了Jquery樹插件zTree用法。分享給大家供大家參考。具體分析如下：

關於zTree的介紹就搜吧。

這個例子的最終效果如下：

滑鼠移動到一級目錄時出現全選鏈接，點擊全選鏈接該目錄下的所有子項都被添加到收件人的文本框中，當然點擊單個子項則添加一個。至於要增加些什麼資訊由自己決定。

1. 下載zTee，頁面引入jquery.js，根據功能需求添加zTree對應的js和css

複製程式碼 程式碼如下:

 
     
     
     

 
jquery.ztree.core-3.5.js：zTree核心包 
 
jquery.ztree.excheck-3.5.js：複選框功能包  
 
jquery.ztree.exedit-3.5.js：編輯功能包  

zTree核心包是必須引入的。

2. 設定zTree，個別說明請參考程式碼中的註解

zTree設定資訊：

變數：zTree中用到的html標籤ID都會在後面加上以下後綴，如一級目錄前面的展開和關閉圖片的id為添加IDMark_Switch，其他的摸索吧。

複製程式碼 程式碼如下:

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 setting = { 
    view: { 
 addHoverDom: addHoverDom, 
 removeHoverDom: removeHoverDom 
    }, 
    callback: { 
 beforeClick: beforeClick, 
 onClick: onClick 
    } 
}; 
function beforeClick(treeId, treeNode, clickFlag) { 
    //alert(treeNode.id); 
    var ticketBagNo = treeNode.phone; 
    re =new RegExp(ticketBagNo);  
    var accept = $("#accept").val();//找到放置資料的地方，並測試是否已經存在 
    if(!re.test(accept)){ 
    $("#accept").val(accept treeNode.name ","); 
    } 
} 
function onClick(event, treeId, treeNode, clickFlag) { 
    //alert(clickFlag "zzz"); 
}

callback中有兩個回呼函數

beforeClick：

是用於捕獲 勾選 或 取消勾選 之前的事件回調函數，並且根據返回值確定是否允許 勾選 或 取消勾選預設值：null

onClick:

用來捕捉節點被點擊的事件回呼函數
如果設定了 beforeClick 方法，且傳回 false，將無法觸發 onClick 事件回呼函數。
預設值：null

addHoverDom，就是滑鼠移過節點所作出的反應,我們這裡為一級目錄添加一個全選功能，addHoverDom是一個函數：

複製程式碼 程式碼如下:

函數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(樹節點); 
 }; 
    } 
}

全選全部選擇方法：

複製程式碼程式碼如下：

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 ","); 
    } 
    } 
}

removeHoverDom：滑鼠刪除節點所做出的反應，刪除全選

複製程式碼如下程式碼：

function removeHoverDom(treeId, treeNode) { 
function removeHoverDom(treeId, treeNode) { 
if (!treeNode.children)return; 
$("#diyBtn1_"treeNode.id).unbind().remove(); 

}

zTree節點資訊：可以根據需求動態產生。

以下為演示數據，每個節點中的名稱，電話都可以按照自己的需要進行添加或，比如你要添加一個年齡：age="23"，但是要注意格式問題，這一點非常重要方便。

複製程式碼

以下程式碼：

var zNodes =[ 
    {id:1,name:"所有老師",open:false,//這裡false為預設關閉,true開啟 
 孩子們：[ 
  {id:2,姓名:"測試老師",電話:"123456789101"}, 
  {id:3,姓名:"大老師",電話:"15623545621"} 
 ] 
    }, 
    {id:4,name:"一班",open:true, 
 孩子們：[ 
      
   {id:5,姓名:"小花",電話:"25364215211"}, 
  {id:6,姓名:"小綠",電話:"365241253"}    }, 

  {id:7,name:"二班",open:true, 
 孩子們：[ 
      
   {id:8,姓名:"小家",電話:"25364215211"}, 
  {id:9,姓名:"小沙",電話:"365241253"} 
   } 

];

以下是我用jsp從服務動態生成樹的例子，不需要可以忽略，我留著以後參考的。

複製程式碼

如下程式碼：

/*var zNodes =[ 
 
    {id:1,name:"所有老師",open:false, 
 孩子們：[ 
   
{id:,name:" ",電話:""}, 如果> 
{id:,name:" ",電話:""}< ;/s:如果> 
  迭代器> 
 ] 
    }, 
    如果> 
 
     
{id:,name:"",open:true, 
 孩子們：[ 
      
{id:,name:"",phone:""},; 
{id:,name:"",phone:""} 
     迭代器> 
     ]}, 
     ]}; 
    如果> 
迭代器> 
];*/

準備就緒。初始化樹要顯示的位置，

複製程式碼如下程式碼：

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

希望本文對大家介紹的javascript程式設計有幫助。