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效果之图片减速度滚动实现代码
Dec 08 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
angular分页指令操作
Jan 09 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
微信小程序使用gitee进行版本管理
Sep 20 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
JavaScript实现班级抽签小程序
May 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
图书管理程序(一)
2006/10/09 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
基于empty函数的输出详解
2013/06/17 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php图片缩放实现方法
2014/02/20 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
pyramid配置session的方法教程
2013/11/27 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python3中sys.argv的实例用法
2020/04/24 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
劳动竞赛活动方案
2014/02/20 职场文书
志愿者活动总结
2014/04/28 职场文书
学党史心得体会
2014/09/05 职场文书
死亡证明书样本说明
2014/10/18 职场文书
记者节感言
2015/08/03 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python