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学习历程和心得小结
Aug 16 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
字符串反转_JavaScript
Apr 28 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
js实现3d悬浮效果
Feb 16 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP引用返回用法示例
2016/05/28 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python中正则表达式与模式匹配
2019/05/07 Python
python读写配置文件操作示例
2019/07/03 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
家长评语大全
2014/01/22 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
建筑工地大门标语
2014/06/18 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
吴仁宝观后感
2015/06/09 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers