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 相关文章推荐
jQuery实现自定义事件的方法
Apr 17 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
JavaScript数组及常见操作方法小结
Nov 13 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php header功能的使用
2013/10/28 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
厂长助理岗位职责
2013/12/27 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
实习推荐信
2014/05/10 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
考生诚信考试承诺书
2015/04/29 职场文书