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 学习笔记(十六) js事件
Feb 01 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
javascript时间函数大全
Jun 30 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JavaScript验证知识整理
Mar 24 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
浅谈Web Storage API的使用
Jun 23 Javascript
原生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 中文乱码解决办法总结分析
2009/07/30 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python聚类算法之基本K均值实例详解
2015/11/20 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
PyQt5实现拖放功能
2018/04/25 Python
Python import与from import使用及区别介绍
2018/09/06 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
广告学专业求职信
2014/06/19 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
房屋认购协议书
2015/01/29 职场文书
礼貌问候语大全
2015/11/10 职场文书
python实现简单反弹球游戏
2021/04/12 Python
python内置模块之上下文管理contextlib
2022/06/14 Python