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. linux查看CPU和内存信息

    一 先来看看ps命令: 1.查看当前某个时间点的进程:ps命令就是最基本同时也是非常强大的进程查看命令.使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结束.进程有没有僵死. 哪些进程占用了 ...

  2. 【前段开发】行内元素和块级元素总结（HTML CSS）

    块级元素 <address> information on author <blockquote> long quotation <button> push but ...

  3. flex4 amcharts 删除水印

    package com.twobowl.component.manualTopo { import com.amcharts.AmPieChart; import com.amcharts.chart ...

  4. 解决.net的堆碎片化带来的内存占用过大的问题

    场景 使用WCF开发的服务端在多个客户端登录后,其服务器的内存占用不断增加. 分析 使用Windbg分析得到内存碎片化严重,其中包含了非常大的空闲空间,最大的一块竟然有150M,真正使用的空间其实很小 ...

  5. 网站可以免费做业务CMS讨论

    中国现在用PHPCMS   DEDECMS织梦    科学新闻CMS  帝国.Discuz.Ecshop等待,但他们个人利益免费,业务.政府.授权费. 什么CMS它可以自由地做商务网站? 考虑到下面几 ...

  6. 72_leetcode_Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume that ...

  7. Swift语言教程中文文档

    Swift语言教程中文文档 Swift语言教程(一)基础数据类型 Swift语言教程(二)基础数据类型 Swift语言教程(三)集合类型 Swift语言教程(四) 集合类型 Swift语言教程(五)控 ...

  8. cocos3——8.实现初学者指南

    1.采用ClippingNode裁剪范围 写作物接口: function createClipNode(node, stencil, inverted) { var clip_node = new c ...

  9. C++ 版本的split_string

    vector<string> split_string(const string &in, char del, bool skip_empty) { vector<strin ...

  10. Thinkphp编辑器扩展类kindeditor用法

    一, 使用前的准备. 使用前请确认你已经建立好了一个Thinkphp站点项目. 1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们拷贝到你的站点项目的Th ...