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 selectNodes()
  {
   var treeObj = $.fn.zTree.getZTreeObj("baseTree");
   //获取节点
   var nodes = treeObj.getNodes();
   if (nodes.length>0)
   {
    var node = treeObj.selectNode(nodes[0]);
    alert(node);
   }
  }
  //-->
 </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="selectNodes()" value="单独选中根节点中第一个节点"/>
 </div>
</div>
</body>
</html>

2、实现效果图:

jQuery插件zTree实现单独选中根节点中第一个节点示例

3、源码说明

单独选中根节点中第一个节点

var node = treeObj.selectNode(nodes[0]);

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

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

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 #Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 #Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 #Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 #Javascript
JS仿JQuery选择器功能
Mar 08 #Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 #Javascript
footer定位页面底部(代码分享)
Mar 07 #Javascript
You might like
php生成唯一的订单函数分享
2015/02/02 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
基于javascript编写简单日历
2016/05/02 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python之字典添加元素的几种方法
2020/09/30 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
经典c++面试题五
2014/12/17 面试题
自荐信包含哪些内容
2013/10/30 职场文书
爱护公共设施标语
2014/06/24 职场文书
军训后的感想
2015/08/07 职场文书