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="../../../css/demo.css">
	<link rel="stylesheet" type="text/css" href="../../../css/zTreeStyle/zTreeStyle.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">
		<!--
		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、实现结果

3、源码说明

（1）Y、N、"p"和“s”说明

Y 属性定义 checkbox 被勾选后的情况； 

N 属性定义 checkbox 取消勾选后的情况； 

"p" 表示操作会影响父级节点； 

"s" 表示操作会影响子级节点。

（2）chkboxType: { "Y": "s", "N": "ps" }

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

zTree实现多选树的更多相关文章

  1. zTree 优秀的jquery树插件

    zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...

  2. 异步ztree 加复选框 及相应后台处理

    异步加载 tree,点一下节点,就发一下请求到后台,然后显示出得到的当前层级节点 <!DOCTYPE html> <html> <head> <meta ch ...

  3. zTree插件实现菜单树

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  4. zTree默认勾选指定ID并执行事件

    try { var arrs = $('#subjectClassID').val().split(","); var treeObj = $.fn.zTree.getZTreeO ...

  5. zTree开发下拉树

    最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...

  6. ExtJs4中的复选树级联选择

    好久没有写新的博文了,过了个年休息了近一个月,人都懒散了.. 这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样.升级并不是一件简单的是,基本相当于重写了, ...

  7. 爱上MVC3~MVC+ZTree大数据异步树加载

    回到目录 理论部分: MVC+ZTree:指在.net MVC环境下进行开发,ZTree是一个jquery的树插件 大数据:一般我们系统中,有一些表结构属于树型的,如分类,地域,菜单,网站导航等等,而 ...

  8. MVC小系列（十四）【MVC+ZTree大数据异步树加载】

    ZTree是一个jquery的树插件可以异步加载 第一步定义一个标准的接口(指的是与ztree默认的数据元素保持一致) /// <summary> /// ZTree数据结构 /// &l ...

  9. ztree异步加载树节点

    参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...

随机推荐

  1. 认识python中的set集合及其用法

    python中,集合(set)是一个无序排列,可哈希, 支持集合关系测试,不支持索引和切片操作,没有特定语法格式, 只能通过工厂函数创建.集合里不会出现两个相同的元素, 所以集合常用来对字符串或元组或 ...

  2. Jedis/JedisPool和Redis数据类型与特性

    1.介绍Jedis Jedis 是 Redis 的 java 版本客户端,使用Jedis可以连接 Redis的数据库,Jedis连接方式有三种Jedis/JedisPool 连接.ShardedJed ...

  3. POJ 3304 Segments[直线与线段相交]

    Segments Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13514   Accepted: 4331 Descrip ...

  4. 《算法导论》Chapter 4 Divide-and-Conquer的学习笔记

    Introduction Divide-and-Conquer的三个步骤: Divide the problem into a number of subproblems that are small ...

  5. WPF项目学习.一

    WPF项目搭建 版权声明:本文为博主初学经验,未经博主允许不得转载. 一.前言 记录在学习与制作WPF过程中遇到的解决方案. 使用MVVM的优点是 数据和视图分离,双向绑定,低耦合,可重用行,相对独立 ...

  6. Ubuntu16.04+Apache虚拟主机配置详解

    在window下,Apache的配置文件是httpd.conf,但在Linux下安装了Apache后发现其配置并不像window下那么简单,Linux下Apache将各个设置项分在了不同的配置文件中, ...

  7. 用tig来查看git log

    sudo apt-get install tig安装软件 在项目目录下:tig查看git 的 log 常用指令:上下箭头选择log的版本enter进入具体版本查看详细k和j是上下滚动查看详细信息的内容 ...

  8. header 头各种类型文件下载

    function down_file($url,$type='application/zip'){     header("Cache-Control: public");     ...

  9. 机器学习03：K近邻算法

    本文来自同步博客. P.S. 不知道怎么显示数学公式以及排版文章.所以如果觉得文章下面格式乱的话请自行跳转到上述链接.后续我将不再对数学公式进行截图,毕竟行内公式截图的话排版会很乱.看原博客地址会有更 ...

  10. [记录]Shell中的getopts和getopt用法

    Shell中的getopts和getopt用法 1.getopts getopts(shell内置命令)不能直接处理长的选项(如:--prefix=/home等),getopts有两个参数,第一个参数 ...