這篇文章主要介紹了Jquery樹插件zTree用法入門教程,實(shí)例分析了zTree插件的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

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

關(guān)于zTree的介紹就搜吧。

這個(gè)例子的最終效果如下：

Jquery樹插件zTree用法入門教程 三聯(lián)

鼠標(biāo)移動到一級目錄時(shí)出現(xiàn)全選鏈接，點(diǎn)擊全選鏈接該目錄下的所有子項(xiàng)都被添加到收件人的文本框中，當(dāng)然點(diǎn)擊單個(gè)子項(xiàng)則添加一個(gè)。至于要添加些什么信息由自己決定。

1. 下載zTee，頁面引入jquery.js，根據(jù)功能需求添加zTree相應(yīng)的js和css

代碼如下:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>

<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>

<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

jquery.ztree.core-3.5.js：zTree核心包

jquery.ztree.excheck-3.5.js：復(fù)選框功能包

jquery.ztree.exedit-3.5.js：編輯功能包

zTree核心包是必須引入的。

2. 配置zTree，個(gè)別說明見代碼中的注釋

zTree設(shè)置信息：

變量：zTree中用到的html標(biāo)簽ID都會在后面添加以下后綴，如一級目錄前面的展開和關(guān)閉圖片的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();//找到要放數(shù)據(jù)的地方，并測試是否已經(jīng)存在

if(!re.test(accept)){

$("#accept").val(accept+treeNode.name+"<"+ticketBagNo+">,");

}

}

function onClick(event, treeId, treeNode, clickFlag) {

//alert(clickFlag+"zzz");

}

callback中有兩個(gè)回調(diào)函數(shù)

beforeClick：

是用于捕獲 勾選 或 取消勾選 之前的事件回調(diào)函數(shù)，并且根據(jù)返回值確定是否允許 勾選 或 取消勾選默認(rèn)值：null

onClick:

用于捕獲節(jié)點(diǎn)被點(diǎn)擊的事件回調(diào)函數(shù)

如果設(shè)置了 beforeClick 方法，且返回 false，將無法觸發(fā) onClick 事件回調(diào)函數(shù)。

默認(rèn)值：null

addHoverDom，就是鼠標(biāo)移過節(jié)點(diǎn)所作出的反應(yīng),我們這里為一級目錄添加一個(gè)全選功能，addHoverDom是一個(gè)函數(shù)：

代碼如下:

function 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 = "<a id='diyBtn1_" +treeNode.id+ "' style='margin:0 0 0 5px;color:red;'>全選</a>";

aObj.append(editStr);

document.getElementById("diyBtn1_"+treeNode.id).onclick = function() {

allSelect(treeNode);

};

}

}

全選allSelect方法：

代碼如下:

function allSelect(treeNode){

if (!treeNode.children)return;

for(i=0;i<treeNode.children.length;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：鼠標(biāo)移除節(jié)點(diǎn)所做出的反應(yīng)，去掉全選

代碼如下:

function removeHoverDom(treeId, treeNode) {

if (!treeNode.children)return;

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

}

zTree節(jié)點(diǎn)信息：可以根據(jù)需求動態(tài)生成。

以下為Demo數(shù)據(jù)，每個(gè)節(jié)點(diǎn)中的name，phone都可以按照自己的需要進(jìn)行添加或修改，比如你要添加一個(gè)年齡：age="23",但是要注意格式問題，這一點(diǎn)是非常方便。

代碼如下:

var zNodes =[

{id:1,name:"所有老師",open:false,//這里false為默認(rèn)關(guān)閉,true打開

children:[

{id:2,name:"測試?yán)蠋?,phone:"123456789101"},

{id:3,name:"大老師",phone:"15623545621"}

]

},

{id:4,name:"一班",open:true,

children:[

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

{id:6,name:"小綠",phone:"365241253"}

},

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

children:[

{id:8,name:"小家",phone:"25364215211"},

{id:9,name:"小沙",phone:"365241253"}

}

];

以下是我用jsp從服務(wù)動態(tài)生成樹的例子,不需要可以忽略，我留著以后參考的。

代碼如下:

/*var zNodes =[

<s:if test="#session.teacherList.size()>0">

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

children:[

<s:iterator value="#session.teacherList" status="tindex" var="t">

<s:if test="#session.teacherList.size() != #tindex.index+1">{id:<s:property value="#tindex.index+2"/>,name:"<s:property value='#t.TName' escape='false' />",phone:"<s:property value='#t.TPhone' escape='false'/>"},</s:if>

<s:if test="#session.teacherList.size() == #tindex.index+1">{id:<s:property value="#tindex.index+2"/>,name:"<s:property value='#t.TName' escape='false' />",phone:"<s:property value='#t.TPhone' escape='false'/>"}</s:if>

</s:iterator>

]

},

</s:if>

<s:iterator value="#session.classList" status="loop" var="c">

<s:if test="#c.students.size()>0">

{id:<s:property value='#c.students.size()+#session.teacherList.size()+#loop.index+3'/>,name:"<s:property value='#c.clsName' escape='false'/>",open:true,

children:[

<s:iterator value="#c.students" status="l" var="s">

<s:if test="#c.students.size() != #l.index+1"> {id:<s:property value="#l.index+#session.teacherList.size()+#loop.index+4"/>,name:"<s:property escape='false' value='#s.SName'/>",phone:"<s:property value='#s.SPhone' escape='false'/>"},</s:if>

<s:if test="#c.students.size() == #l.index+1">{id:<s:property value="#l.index+#session.teacherList.size()+#loop.index+4"/>,name:"<s:property escape='false' value='#s.SName'/>",phone:"<s:property value='#s.SPhone' escape='false'/>"}</s:if>

</s:iterator>

<s:if test="#session.classList.size() != #loop.index+1">]},</s:if>

<s:if test="#session.classList.size() == #loop.index+1">]}</s:if>

</s:if>

</s:iterator>

];*/

準(zhǔn)備就緒。初始化樹要顯示的地方，

代碼如下:

$(document).ready(function(){

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

});

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

更多信息請查看IT技術(shù)專欄