Jquery树插件zTree用法入门教程


Posted in Javascript onFebruary 17, 2015

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

关于zTree的介绍就搜吧。

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

Jquery树插件zTree用法入门教程

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

1. 下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的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:复选框功能包  
 
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+"<"+ticketBagNo+">,");  

    }  

}  

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

    //alert(clickFlag+"zzz");  

}

callback中有两个回调函数

beforeClick:

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

onClick:

用于捕获节点被点击的事件回调函数
如果设置了 beforeClick 方法,且返回 false,将无法触发 onClick 事件回调函数。
默认值:null

addHoverDom,就是鼠标移过节点所作出的反应,我们这里为一级目录添加一个全选功能,addHoverDom是一个函数:

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:鼠标移除节点所做出的反应,去掉全选

function removeHoverDom(treeId, treeNode) {  

if (!treeNode.children)return;  

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

}

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

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

var zNodes =[  

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

 children:[  

  {id:2,name:"测试老师",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从服务动态生成树的例子,不需要可以忽略,我留着以后参考的。

/*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>  

];*/

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

$(document).ready(function(){  

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

});

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

Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jQuery插件开发全解析
Oct 10 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
Bootstrap布局方式详解
May 27 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 #Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 #Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 #Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 #Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 #Javascript
js实现下拉框选择要显示图片的方法
Feb 16 #Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python实现ssh批量登录并执行命令
2016/10/25 Python
Golang与python线程详解及简单实例
2017/04/27 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python语言快速上手学习方法
2018/12/14 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
输入N,打印N*N矩阵
2012/02/20 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
小学生家长评语集锦
2014/01/30 职场文书
丑小鸭教学反思
2014/02/03 职场文书
《胡杨》教学反思
2014/02/16 职场文书
学校食品安全责任书
2015/01/29 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python