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面试题说起（大神勿入）

    作为一个自学Python的小白,在了解了点皮毛之后,便按捺不住自己内心的骚动,在某招聘网站上投了些简历,居然也收到了面试邀请.第二天到公司,HR废话不多讲,上来就抛出几张A4纸,"先做题吧, ...

  2. php 把驼峰样式的字符串转换成下划线样式的字符串

    1.如何在php中把驼峰样式的字符串转换成下划线样式的字符串.例:输入是FooBar的话,输出则是foo_bar 以下是用正则的方式去完成,既然用到正则,方法肯定就不只一种,我们看下下面的方式 ech ...

  3. Spring的事务管理（理论篇，下篇提供代码实现）

    事务:逻辑上的一组操作,这组操作要么全部成功,要么全部失败(事务十大特性:原子性,一致性,隔离性,持久性) 原子性:事务是不可分割的工作单位,事务中的操作要么都发生了,要么都不发生.(也就是说不能单独 ...

  4. Go笔记-map

    [概念]     1- map 是引用类型的     2- 声明方式         var map1 map[keytype]valuetype             例如:var map1 ma ...

  5. webrtc底层一对一连接过程探索（二）

    一.连接过程继续解读-----fun32解读 1.1 fun32.02 "undefined" != typeof cordova && (N = !0, D = ...

  6. BZOJ 2733: [HNOI2012]永无乡 [splay启发式合并]

    2733: [HNOI2012]永无乡 题意:加边,询问一个连通块中k小值 终于写了一下splay启发式合并 本题直接splay上一个节点对应图上一个点就可以了 并查集维护连通性 合并的时候,把siz ...

  7. S5PV210中断处理

    _start: 1.设置栈空间:防止之前的UBOOT代码被覆盖,应为c中需要栈空间 ldr sp, =0x40010000 2.设置CPSR的I,F位,A8打开IRQ,FIQ中断: mov r0, # ...

  8. 简单认识一下什么是vue-router

    什么是vue-router? 用通俗一点的话来讲,其实就是一个url和组件之间的映射关系,当我们访问不同的url的时候在页面渲染不同的组件 vue-router怎么用? vue-router作为一个v ...

  9. PHP生成图片验证码、点击切换实例

    http://www.jb51.net/article/51506.htm 现在让我们来看下 PHP 代码 复制代码代码如下: <?php session_start();function ra ...

  10. virsh 常用操作

    virsh list 显示在运行的 虚拟机    virsh list --all 显示在运行和停止的虚拟机    ssh 192.168.0.115 通过网络连接子机   如果没有网络 可以通过 v ...