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 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
js跳转页面方法总结
2014/01/29 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
js隐式转换的知识实例讲解
2018/09/28 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python保存数据到本地文件的方法
2018/06/23 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
三峡大坝导游词
2015/01/31 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
公司门卫岗位职责
2015/04/13 职场文书
警示教育片观后感
2015/06/17 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python