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:131, pId:13, name:"黄州区"},

			{ id:132, pId:13, name:"麻城市"},

			{ id:133, pId:13, name:"武穴市"},

			{ id:134, pId:13, name:"团风县"},

			{ id:135, pId:13, name:"浠水县"},

			{ id:136, pId:13, name:"罗田县"},

			{ id:137, pId:13, 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:"石峰区"}

		];

		$(document).ready(function(){

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

		});

		/**

		 * 获取当前选中的第一个节点在同级节点中的序号

		 */

		function indexNodes()

		{

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

		    //获取选中的节点

			var nodes = treeObj.getSelectedNodes();

			if (nodes.length>0)

			{

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

			    {

			        var index = treeObj.getNodeIndex(nodes[i]);

			        alert("获取当前选中的第一个节点在同级节点中的序号："+index);

			    }

			}

		}

		//-->

	</script>

 </head>

<body>

<div class="content_wrap">

	<div class="zTreeDemoBackground left">

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

		<input type="button" id="btn" onclick="indexNodes()" value="获取当前选中的第一个节点在同级节点中的序号"/>

	</div>

</div>

</body>

</html>

2、实现结果

（1）初始化

（2）选择“汉口”时

（3）选择“汉阳”时

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="585" height="348" border="1" alt="">

3、源代码说明

var index = treeObj.getNodeIndex(nodes[i]);

alert("获取当前选中的第一个节点在同级节点中的序号："+index);

版权声明：本文博客原创文章，博客，未经同意，不得转载。

zTree实现访问到第一节点在相同水平当前所选节点数目的更多相关文章

  1. Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

    前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...

  2. zTree实现单独选中根节点中第一个节点

    zTree实现单独选中根节点中第一个节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树& ...

  3. ztree异步加载树节点

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

  4. jquery zTree 查找所有的叶子节点

    jquery zTree 查找所有的叶子节点 // 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 ...

  5. zTree实现删除树子节点

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

  6. Z-tree 统计每一父节点的叶子节点数(看这一篇就够了)

    最近刚走出校园的我找到了第一份工作,在入职考核中就遇见了一道Z-tree的试题 这道题目本身是不难的,但是我第一次接触这个插件而且还把解决问题的方向搞错了,弄的我好几天都很难受. 弄得我都开始怀疑人生 ...

  7. zTree自动点击第一个节点（转载）

    var setting = { view: { dblClickExpand: true,//双击展开 showLayer: false, selectedMulti: false,//是否允许多选 ...

  8. zTree判断是否为父节点

    var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getSelectedNodes(); if(t ...

  9. ztree模糊筛选展开选中节点

    树呢是一个最简单的树,并没有做一异步加载,也就是一个筛选,然后跳到第一个符合删选的数据下,并且所有符合的都会被展开和选中.其中ztreeAry是一个模拟的本地数组json.在test.json中,如果 ...

随机推荐

  1. java线程学生进实训室

    Instructor: Dr. Simina FlutureCSCI 34 CSCI 34 CSCI 34CSCI 34 0 Summer 201 ummer 201 ummer 201ummer 2 ...

  2. Spring之AOP术语

    AOP是Aspect Oriented Programing的简称.被译为"面向切面编程". AOP独辟蹊径通过横向抽取机制为这类无法通过纵向继承体系进行抽象的反复性代码提供了解决 ...

  3. java程序开发代写(QQ:928900200)

    条件:手机1.2都是安卓智能机,手机1开热点,手机2链接手机1,功能:A手机2通过刷手机网页,登陆手机1设定的页面并下载其手机的指定文件,B手机1控制手机2的流量,当通过的流量多的时候,停止流量的供应

  4. awk与sed：关于多行的样本

    几天前CSDN看到一个帖子http://bbs.csdn.net/topics/390848841,楼主贴了以下的问题: 例: 12345 67890 1234567890 123 4567890 怎 ...

  5. 令人无限遐想的各种PCIe加速板卡

    声明 本文不涉及不论什么特定API,也不针对不论什么特定的厂商,可是仍然值得透露一点的是,某些加速板卡厂商的成功点和失败点恰恰都是在于其通用性,在这个人们依旧依赖专业板卡的时代,依旧将板卡视为解决专业 ...

  6. 使用 Cordova+Visual Studio 创建跨平台移动应用（3）

    1 背景 本章节是关于Telerik AppBuilder for Visual Studio的. 目前(2014.12)为Telerik公司Telerik Platform的一部分,Telerik ...

  7. Xampp mysql无法启动的解决方案(转)

    如果出现mysql 无法启动表明在安装xampp 前已经安装了mysql,造成mysql服务无法启动. [mysql] MySQL Service detected with wrong path23 ...

  8. 集合hashCode()方法和equals()办法

    1.哈希码:         Object中的HashCode方法会返回该对象的的内存真实地址的整数化表示,这个形象的不是真正抵制的整数值就是哈希码. 2.利用哈希码向集合中插入数据的顺序?     ...

  9. sqlite3触发器的使用

    研究了一下osx下dock中应用的存储,位于~/Library/Application Support/Dock/下一个比較名字比較长的db文件里,之前简单的介绍过osx launchpad图标的删除 ...

  10. EL与JSTL注意事项汇总

    EL使用表达式(5一个 问题) JSTL使用标签(5问题) 什么是EL.它可以用做? EL全名Expression Language在JSP使用页面 格公式${表达式} 样例${requestScop ...