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. C#之DataTable转List与List转Datatable

    闲来无事,只有写代码啦,以下为DataTable转List与List转DataTable的两个方法,主要技术点用到了反射原理: /// <summary> /// 模型转换类 /// &l ...

  2. java之过滤器Filter （应用场景）

    filter在开发中的常见应用:     * 1.filter可以目标资源执行之前,进行权限检查,检查用户有无权限,如有权限则放行,如没有,则拒绝访问     * 2.filter可以放行之前,对re ...

  3. iOS-隐藏Navigationbar【导航栏无缝圆滑的隐藏】

    1.ViewController .m - (void)viewDidLoad { [super viewDidLoad]; self.title = @"隐藏导航栏"; UIBu ...

  4. 洛谷 [P2761] 软件补丁问题

    并不是网络流 状压+SPFA 通过题目中的描述及数据范围可知,我们状压当前的漏洞,以每个二进制位表示是否有这个漏洞,并以状压的结果为顶点,以补丁的时间为边跑SPFA即可 #include <io ...

  5. Heartbeat实现热备

    1.环境准备:1)主节点:master eth0:192.168.0.201 eth1:192.168.0.03 2)备节点:slave eth0 :192.168.0.215 eth1:192.16 ...

  6. typedef void(*Fun)(void);

    typedef void(*Fun)(void); 函数类似于数组,函数名就是它的首地址: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  7. Properties工具类

    /** * 加载Properties文件 * @param path Properties文件路径 * @return */ private static Properties getClasspat ...

  8. MarkDown 编辑数学公式

    1. 参考博客:http://blog.csdn.net/smstong/article/details/44340637 1 数学公式的web解决方案 在网页上显示漂亮的数学公式,是多年来数学工作者 ...

  9. shell实现centos7双网卡修改网卡名eth0,eth1,并设置网络

    #!/bin/bash interface1=`ls /sys/class/net|grep en|awk 'NR==1{print}'` interface2=`ls /sys/class/net| ...

  10. 关于ssh登录出现异常警告：WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    提示警告信息如下: arnold@WSN:~$ ssh 10.18.46.111 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...