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 版本自动生成文章摘要
Jul 23 Javascript
Iframe thickbox2.0使用的方法
Mar 05 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
利用js对象弹出一个层
2008/03/26 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
urllib2自定义opener详解
2014/02/07 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python 3中的yield from语法详解
2017/01/18 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
指针和引用有什么区别
2013/01/13 面试题
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
毕业典礼邀请函
2015/01/31 职场文书
《我是什么》教学反思
2016/02/16 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
7个关于Python的经典基础案例
2021/11/07 Python