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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 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导入导出excel实例
2013/10/25 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python实现批量压缩图片
2018/01/25 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python中如何导入类示例详解
2019/04/17 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
教师绩效工资方案
2014/02/01 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书