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 removeChildNodesTree()
    {
      var treeObj = $.fn.zTree.getZTreeObj("baseTree");
      //获取全部节点数据
      var nodes = treeObj.getNodes();
      for (var i=0, l=nodes.length; i < l; i++)
      {
        //清空选中的第一个节点的子节点
        treeObj.removeChildNodes(nodes[i]);
      }
    }
    //-->
  </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="removeChildNodesTree()" value="清空选中的第一个节点的子节点"/>
  </div>
</div>
</body>
</html>

2、实现效果图:

(1)初始化

jQuery插件zTree实现清空选中第一个节点所有子节点的方法

(2)单击按钮

jQuery插件zTree实现清空选中第一个节点所有子节点的方法

3、源码说明:

//清空选中的第一个节点的子节点
treeObj.removeChildNodes(nodes[i]);

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

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

Javascript 相关文章推荐
jquery实现加载等待效果示例
Sep 25 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
正则 js分转元带千分符号详解
Mar 08 #Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 #Javascript
js/jq仿window文件夹框选操作插件
Mar 08 #Javascript
js实现上下左右弹框划出效果
Mar 08 #Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 #Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 #Javascript
原生js实现瀑布流布局
Mar 08 #Javascript
You might like
PHP开发中四种查询返回结果分析
2011/01/02 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现决策树
2017/12/21 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python数据库小程序源代码
2019/09/15 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python configparser模块应用过程解析
2020/08/14 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
教学器材管理制度
2014/01/26 职场文书
2014教师研修学习体会
2014/07/08 职场文书
司考复习计划
2015/01/19 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
寻找成龙观后感
2015/06/12 职场文书
丧事主持词
2015/07/02 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers