jQuery插件zTree实现的多选树效果示例


Posted in Javascript onMarch 08, 2017

本文实例讲述了jQuery插件zTree实现的多选树效果。分享给大家供大家参考,具体如下:

1、实现代码:

<!DOCTYPE html>
<html>
<head>
  <title>多选树</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/demo.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
  <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.excheck.min.js"></script>
  <script type="text/javascript">
    <!--
    var setting = {
      check: {
        enable: true,
        chkStyle: "checkbox",
        chkboxType: { "Y": "s", "N": "ps" }
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };
    var zNodes =[
      { id:1, pId:0, name:"湖北省", open:true},
      { id:11, pId:1, name:"武汉市", open:true},
      { id:111, pId:11, name:"汉口"},
      { id:112, pId:11, name:"武昌"},
      { id:12, pId:1, name:"黄石市", open:true},
      { id:121, pId:12, name:"黄石港区"},
      { id:122, pId:12, name:"西塞山区"},
      { id:2, pId:0, name:"湖南省", open:true},
      { id:21, pId:2, name:"长沙市"},
      { id:22, pId:2, name:"株洲市", open:true},
      { id:221, pId:22, name:"天元区"},
      { id:222, pId:22, name:"荷塘区"},
      { id:23, pId:2, name:"湘潭市"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#treeMultiple"), setting, zNodes);
    });
    //-->
  </script>
</head>
<body>
<div class="content_wrap" style="text-align: center;">
  <div class="zTreeDemoBackground left">
    <ul id="treeMultiple" class="ztree" style="height: 300px; width:150px; overflow-y: auto"></ul>
  </div>
</div>
</body>
</html>

2、实现效果图:

jQuery插件zTree实现的多选树效果示例

3、源码说明

(1)Y、N、"p"和“s”说明

Y 属性定义 checkbox 被勾选后的情况;
N 属性定义 checkbox 取消勾选后的情况;
"p" 表示操作会影响父级节点;
"s" 表示操作会影响子级节点。

(2)chkboxType: { "Y": "s", "N": "ps" }

表示checkbox勾选操作,只影响子节点;取消勾选操作,影响父子节点

附:zTree_v3插件点击此处本站下载

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

Javascript 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
详解JavaScript中的强制类型转换
Apr 15 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
Vue父子组件传值的一些坑
Sep 16 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 #Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 #Javascript
完美实现js选项卡切换效果(一)
Mar 08 #Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 #Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 #Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 #Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 #Javascript
You might like
php截取后台登陆密码的代码
2012/05/05 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php利用header函数下载各种文件
2016/08/24 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
javascript 快速排序函数代码
2012/05/30 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
信息与计算科学专业推荐信
2014/02/23 职场文书
森林防火宣传标语
2014/06/27 职场文书
工会趣味活动方案
2014/08/18 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
项目建议书
2015/02/04 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书