jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法


Posted in Javascript onMarch 08, 2017

本文实例讲述了jQuery插件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="zTree_v3/css/demo.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
  <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.min.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)初始化

jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

(2)选择“汉口”时

jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

(3)选择“汉阳”时

jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

3、源码说明:

var index = treeObj.getNodeIndex(nodes[i]); 
alert("获取当前选中的第一个节点在同级节点中的序号:"+index);

附:zTree_v3插件点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
vue实现表格合并功能
Dec 01 Vue.js
原生js实现瀑布流布局
Mar 08 #Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 #Javascript
JavaScript中的工厂函数(推荐)
Mar 08 #Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 #Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 #Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 #Javascript
原生js实现选项卡功能
Mar 08 #Javascript
You might like
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php-fpm配置详解
2014/02/12 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
django 读取图片到页面实例
2020/03/27 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
亲子拓展活动方案
2014/02/20 职场文书
2014国培学习感言
2014/03/05 职场文书
工作失职检讨书500字
2014/10/17 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
运动会闭幕词
2015/01/28 职场文书
甲午风云观后感
2015/06/02 职场文书
紧急迫降观后感
2015/06/15 职场文书
欠条范文
2015/07/03 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫