zTree实现基本树

1、实现源代码

<!DOCTYPE html>

<html>

<head>

	<title>zTree实现基本树</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">

		<!--

		var setting = {

			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:113, pId:11, name:"武昌"},

			{ id:12, pId:1, name:"黄石市"},

			{ id:121, pId:12, name:"黄石港区"},

			{ id:122, pId:12, name:"西塞山区"},

			{ id:123, pId:12, name:"下陆区"},

			{ id:124, pId:12, name:"铁山区"},

			{ id:13, pId:1, name:"黄冈市"},

			{ id:2, pId:0, name:"湖南省", open:true},

			{ id:21, pId:2, name:"长沙市", open:true},

			{ id:211, pId:21, name:"芙蓉区"},

			{ id:212, pId:21, name:"天心区"},

			{ id:213, pId:21, name:"岳麓区"},

			{ id:214, pId:21, name:"开福区"},

			{ id:22, pId:2, name:"株洲市"},

			{ id:221, pId:22, name:"天元区"},

			{ id:222, pId:22, name:"荷塘区"},

			{ id:223, pId:22, name:"芦淞区"},

			{ id:224, pId:22, name:"石峰区"},

			{ id:23, pId:2, name:"湘潭市"},

			{ id:231, pId:23, name:"雨湖区"},

			{ id:232, pId:23, name:"岳塘区"},

			{ id:233, pId:23, name:"湘乡市"},

			{ id:234, pId:23, name:"韶山市"}

		];

		$(document).ready(function(){

			$.fn.zTree.init($("#baseTree"), setting, zNodes);

		});

		/**

		 * 获取选中节点的编码和名称

		 */

		function findSelect()

		{

		     var treeObj = $.fn.zTree.getZTreeObj("baseTree");

			 var nodes = treeObj.getSelectedNodes();

			 for(var i=0;i<nodes.length;i++)

			 {

			     var nodeId = nodes[i].id;

			     var nodeName = nodes[i].name;

			      alert("树节点编码："+nodeId+"\n"+"树节点名称："+nodeName);

			 }

		}

		//-->

	</script>

 </head>

<body>

<div class="content_wrap">

	<div class="zTreeDemoBackground left" style="text-align: center;">

		<ul id="baseTree" class="ztree" style="height: 300px; width:200px; overflow-y: auto"></ul>

		<input type="button" id="btn" onclick="findSelect()" value="获取选中节点"/>

	</div>

</div>

</body>

</html>

2、设计结果

（1）初始化

（2）单击button

3、设计说明

     获取 zTree 当前被选中的节点数据集合

var treeObj = $.fn.zTree.getZTreeObj("baseTree");

var nodes = treeObj.getSelectedNodes();

zTree实现基本树的更多相关文章

  1. Ztree行政地区树状展示

    Ztree行政地区树状展示(点击加载) 效果如下: 开始贴代码: 实体类 Item,用于对Ztree的节点展示 public class Item { private String id; priva ...

  2. zTree实现删除树节点

    zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...

  3. zTree实现删除树子节点

    zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...

  4. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...

  5. MVC小系列（十五）【MVC+ZTree实现对树的CURD及拖拽操作】

    根据上一讲的可以加载一棵大树,这讲讲下如果操作这颗大树 <link href="../../Scripts/JQuery-zTree/css/zTreeStyle/zTreeStyle ...

  6. 【原创】MVC+ZTree实现权限树的功能

    今天自己采用MVC+ZTree的技术实现权限树的功能,有需要的可以收藏一下. 1.需要引用的JS 文件 <link href="~/Content/ZTree/css/demo.css ...

  7. MVC+ZTree实现对树的CURD及拖拽操作

    上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除节点,编辑 ...

  8. 基于SSM的RBAC权限系统(1)-利用ajax，bootstrap，ztree完成权限树功能

    仅支持回显以及选择,不支持在树中的编辑 搭建后台回显以及修改的模块 JSON数据封装 public class Msg { private int code; private String msg; ...

  9. zTree怎么判断树有节点展开或者完全关闭的

    树节点有个open属性,引用API: 记录 treeNode 节点的 展开 / 折叠 状态.1.初始化节点数据时,如果设定 treeNode.open = true,则会直接展开此节点2.叶子节点 t ...

随机推荐

  1. ps做gif love教程（转）

    先看看效果吧: 这是在写部教程的时候,看到一个由方格组成的心.于是试着用PS做成了动画,然后加入了LOVE四个字母,看起来还可以.但是,有些复杂.复杂倒不是技术上的复杂,是做起来复杂. 来试试吧. 1 ...

  2. debug 64bit dump of a 32bit process in windows 7 64bit

    In Windows 7 the TaskMgr provides one easy way to create dump for the applications. You can right cl ...

  3. 耳机jack构造及在应用时可能出现的问题

    目前市场上耳机分为4环耳机(图1所示,iphone型)和3环耳机(图2所示).4环耳机称为headset,3环耳机称为headphone,两者之间的区别就是4环耳机比3环耳机多个micphone.而J ...

  4. 微信企业支付--遇到不明确结果的err_code：SYSTEMERROR，NOT_FOUND

    前提 项目开发中实现微信提现的功能.使用到了两个接口 企业付款接口:https://api.mch.weixin.qq.com/mmpaymkttransfers/promotion/transfer ...

  5. cc.RepeatForever和cc.Spawn冲突

    正确 var tmpShip3 = cc.Sprite.createWithSpriteFrameName("w1_1.png"); tmpShip3.setPosition(,) ...

  6. SQL Server常用元数据函数

    元数据函数 1.获取数据库标识符DB_ID DB_ID函数用于获取当前数据库的唯一ID(int数据类型),数据库ID用于服务器上唯一区分书库. 语法结构: DB_ID (['database_name ...

  7. 第二百二十二天 how can I 坚持

    纪念碑谷好费脑子啊,头都大了,被遗忘的海最后百度了下攻略才过了. 今天下班遇到了易军,哎,总感觉怪怪的,心情顿时压抑了些,源二生日,一起去吃了个饭,烤鸭,吃的挺不错. 创新去哪了,其实每个人的内心深处 ...

  8. SQL SERVER安装提示“安装了 Microsoft Visual Studio 2008 的早期版本

    工作共遇到的问题记录: 安装Sql Server 2008 R2时提示错误:“此计算机上安装了 Microsoft Visual Studio 2008 的早期版本.请在安装 SQL Server 2 ...

  9. keil中如何得知所编译程序所占空间大小？

    keil编译后出现Program Size: data=21.0 xdata=0 code=2231. 这表明 data= 21.0  数据储存器内部RAM占用21字节, xdata=0     数据 ...

  10. MFC中消息响应机制

    由于视类窗口始终覆盖在框架类窗口之上,因此所有操作,包括鼠标单击.鼠标移动等操作都只能由视类窗口捕获.一个MFC消息响应函数在程序中有三处相关信息:函数原型.函数实现和以及用来关联消息和消息响应函数的 ...