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. Trusted Execution Technology (TXT) --- 基本原理篇

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://www.cnblogs.com/tsec/p/8409600.html 1. Intel TXT 介绍 TXT是Trusted Ex ...

  2. [一个脑洞] Candy?'s 不饱和度

    update 2017.7.10 Candy?'s 不饱和度 题目背景 化学老师让同学们出题!昌老师担任有机组组长! Candy?出了一道数不饱和度的题目,昌老师不会做所以拒绝接受!!! 于是Cand ...

  3. CF 716E. Digit Tree [点分治]

    题意:一棵树,边上有一个个位数字,走一条路径会得到一个数字,求有多少路径得到的数字可以整除\(P\) 路径统计一般就是点分治了 \[ a*10^{deep} + b \ \equiv \pmod P\ ...

  4. BZOJ 4195: [Noi2015]程序自动分析 [并查集 离散化 | 种类并查集WA]

    题意: 给出若干相等和不等关系,判断是否可行 woc NOI考这么傻逼的题飞快打了一个种类并查集交上了然后爆零... 发现相等和不等看错了异或一下再叫woc90分 然后发现md$a \neq b, a ...

  5. BZOJ 1485: [HNOI2009]有趣的数列 [Catalan数 质因子分解]

    1485: [HNOI2009]有趣的数列 Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所 ...

  6. 读书共享 Primer Plus C-part 12

    第十四章 结构和其他数据形式 1.关于上struct与union 的区别 #include<stdio.h> typedef union Book_u { int pags; int mo ...

  7. 损失函数 hinge loss vs softmax loss

    1. 损失函数 损失函数(Loss function)是用来估量你模型的预测值 f(x) 与真实值 Y 的不一致程度,它是一个非负实值函数,通常用 L(Y,f(x)) 来表示. 损失函数越小,模型的鲁 ...

  8. 《InsideUE4》UObject（六）类型系统代码生成重构-UE4CodeGen_Private

    读的不如写的快 引言 在之前的<InsideUE4>UObject(四)类型系统代码生成和<InsideUE4>UObject(五)类型系统收集章节里,我们介绍了UE4是如何根 ...

  9. SQL替换语句 批量修改、增加、删除字段内容

    sql替换语句,用该命令可以整批替换某字段的内容,也可以批量在原字段内容上加上或去掉字符. 命令总解:update 表的名称 set 此表要替换的字段名=REPLACE(此表要替换的字段名, '原来内 ...

  10. 韩信点兵（hanxin）

    相传韩信才智过人,从不直接清点自己军队的人数,只要让士兵先后以三人一排.五人一排.七人一排地变换队形,而他每次只掠一眼队伍的排尾就知道总人数了.输入包含多组数据,每组数据包含3个非负整数a,b,c,表 ...