Jquery树插件zTree用法入门教程

本文实例分析了Jquery树插件zTree用法。分享给大家供大家参考。具体分析如下：

关于zTree的介绍就搜吧。

这个例子的最终效果如下：

鼠标移动到一级目录时出现全选链接，点击全选链接该目录下的所有子项都被添加到收件人的文本框中，当然点击单个子项则添加一个。至于要添加些什么信息由自己决定。

1.下载zTee，页面引入jquery.js，根据功能需求添加zTree相应的射流研究…和钢性铸铁复制代码代码如下：script类型=' text/JAVAScript ' src=' http : js/jquery-1。4 .4 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。z树。核心-3.5。js /脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。z树。excheck-3.5。js /脚本核心包jquery.ztree.excheck-3.5.js:复选框功能包jquery.ztree.exedit-3.5.js:编辑功能包

zTree核心包是必须引入的。

2.配置zTree，个别说明见代码中的注释

zTree设置信息：

变量：zTree中用到的超文本标记语言标签身份都会在后面添加以下后缀，如一级目录前面的展开和关闭图片的编号为添加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设置={ view : { AddHostDom : AddHostDom，removeHostDom : removeHostDom }，回调： {单击前：单击前，onClick: onClick } }函数beforeClick(treeId，treeNode，click flag){//alert(treeNode。id)；var ticket bagno=treenode . phone re=new RegExp(ticket bagno)；var accept=$('#accept ').val()；//找到要放数据的地方，并测试是否已经存在if(！re . test(accept)){ $(“# accept”).val(接受treeNode.name '' ticketBagNo '，')；} }函数onClick(事件、treeId、treeNode、click flag){//alert(click flag‘zzz’)；}

回收中有两个回调函数

单击前：

是用于捕获勾选或取消勾选之前的事件回调函数，并且根据返回值确定是否允许勾选或取消勾选默认值：null

onClick:

用于捕获节点被点击的事件回调函数如果设置了单击前方法，且返回假的，将无法触发点击事件回调函数。默认值：null

添加悬停多姆，就是鼠标移过节点所作出的反应，我们这里为一级目录添加一个全选功能，addHoverDom是一个函数：复制代码代码如下：函数AddHostDom(TreeID，treeNode) { if(！treeNode.children)返回；if(树节点。父节点树节点。父节点。身份证！=1)返回；var aObj=$(' # ' treenode。tid IDMark _ A)；if(树节点。孩子们。长度0){ if($(' # DIY BTN 1 _ '树节点。id)。长度0)返回；if($(' # diybtn 2 _ ' treenode。id)。长度0)返回；//' onclick=' all select(' tree node ')var editStr=' a id=' DIY BTN 1 _ '树节点。id“style=”边距：0 0 0 5px'颜色：红色'全选/a '；aobj。追加(编辑字符串)；文件。getelementbyid(' DIY BTN 1 _ ' tree node。id ).onclick=function(){ all select(树节点)；};} }

全选全选方法：复制代码代码如下：函数allSelect(treeNode){ if(！treeNode.children)返回；for(I=0；itrienode。孩子们。长度；I){ var ticket bagno=treenode。儿童.电话；re=new RegExp(ticket bagno)；var accept=$('#accept ').val()；//找到文本框如果该记录未添加就添加if(！re . test(accept)){ $(“# accept”).val(接受treeNode.children[i]).名称' ' ticketBagNo '，')；} } }

removeHoverDom:鼠标移除节点所做出的反应，去掉全选复制代码代码如下：函数removeHostDom(TreeID，treeNode) { if(！treeNode.children)返回；$('#diyBtn1_' treeNode.id).解除绑定()。移除();}

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

以下为演示数据，每个节点中的姓名、电话都可以按照自己的需要进行添加或修改，比如你要添加一个年龄：年龄='23 ',但是要注意格式问题，这一点是非常方便。复制代码代码如下：var zNodes=[ {id:1，name: '所有老师，open:false，//这里错误的为默认关闭，真的打开儿童：[ {id:2，name: '测试老师，电话：'123456789101'}，{id:3，name: '大老师，电话：'15623545621'} ] }，{id:4，name: '一班，open:true，children:[ {id:5，name: '小花，电话：'25364215211'}，{id:6，name: '小绿，电话：'365241253'} },

{id:7，name: '二班，open:true，children:[ {id:8，name: '小家，电话：'25364215211'}，{id:9，name: '小沙，电话： ' 365241253 ' } }]；

以下是我用jsp从服务动态生成树的例子，不需要可以忽略，我留着以后参考的。复制代码代码如下：/所有老师，open:false，children :[s :迭代器值=' # session。教师列表' status=' tindex ' var=' t ' s : if test=' # session。教师名单。size()！=# tindex。索引1"{ id :s :属性值=' # tindex。索引2 '/name :的s :属性值=' # t . TName ' escape=' false '/'，phone :的s 3360属性值=' # t . TName ' escape=' false '/' }，s : if s 3360 if test=' # session。教师专家。size()=# tindex。索引1 " { id 3:s 360s=# l . index 1“{ id :s :属性值=' # l . index # session。教师名单。size()#循环。索引4 '/name :的s :属性转义=' false ' value=' # s . SName '/'，phone :的s 3360属性值=' # s . SPhone ' escape=' false '/' }，s/s : if s : if test=' # c . students。size()=# l . index 1 .=#loop.index 1']}，/s : if s 3360 if test=' # session。班级名单。size()==#循环。索引1 ']}/s : if/s 3360 if/s 3360迭代器]；*/

准备就绪。初始化树要显示的地方，复制代码代码如下：美元（文件)。ready(function(){ $)。fn。ztree。init($(' # treedeo ')，setting，zNodes)；});

希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。