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 相关文章推荐
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
JavaScript中的Proxy对象
Nov 27 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
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python虚拟环境完美部署教程
2019/08/06 Python
Django用户身份验证完成示例代码
2020/04/03 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
软件测试面试题
2014/01/05 面试题
EJB的几种类型
2012/08/15 面试题
UNIX文件类型
2013/08/29 面试题
档案检查欢迎词
2014/01/13 职场文书
考试违纪检讨书
2014/02/02 职场文书
12月红领巾广播稿
2014/02/13 职场文书