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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
Javascript面向对象编程
Mar 18 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
angular异步验证防抖踩坑实录
Dec 01 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php HandlerSocket的使用
2011/05/02 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
js实现简易计算器功能
2019/10/18 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python创建xml文件示例
2017/03/22 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
法学专业应届生求职信
2013/10/16 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
2014年环保工作总结
2014/11/26 职场文书
关于学习的决心书
2015/02/05 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
使用JS实现简易计算器
2021/06/14 Javascript
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers