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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
原生js生成图片验证码
Oct 11 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+mysql留言本源码
2009/11/11 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
解决Python传递中文参数的问题
2015/08/04 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python如何更新包
2020/06/11 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
会计专业自我鉴定
2014/02/10 职场文书
工作决心书范文
2014/03/11 职场文书
2014中考励志标语
2014/06/05 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
学习党章心得体会2016
2016/01/15 职场文书