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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JQuery实现图片轮播效果
May 08 jQuery
js实现随机点名小功能
Aug 17 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
vue 实现锚点功能操作
Aug 10 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调用数据库的存贮过程!
2006/10/09 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
深入理解React高阶组件
2017/09/28 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
如何查看python关键字
2021/01/17 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
ktv收银员岗位职责
2013/12/16 职场文书
校本教研工作制度
2014/01/22 职场文书
农村婚礼主持词
2014/03/13 职场文书
群众路线专项整治方案
2014/10/27 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang