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的大众点评,分类导航实现代码
Aug 23 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
js 闭包深入理解与实例分析
Mar 19 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python中lambda()的用法
2017/11/16 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
阅兵口号
2014/06/19 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
Python IO文件管理的具体使用
2022/03/20 Python