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:"石峰区"},
      { id:23, pId:2, name:"湘潭市"},
      { id:231, pId:23, name:"雨湖区"},
      { id:232, pId:23, name:"岳塘区"},
      { id:233, pId:23, name:"湘乡市"},
      { id:234, pId:23, name:"韶山市"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#baseTree"), setting, zNodes);
    });
    /**
     * 删除选中的子节点
     */
    function removeNodes()
    {
      var treeObj = $.fn.zTree.getZTreeObj("baseTree");
      //选中节点
      var nodes = treeObj.getSelectedNodes();
      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" style="text-align: center;">
    <ul id="baseTree" class="ztree" style="height: 300px; width:200px; overflow-y: auto"></ul>
    <input type="button" id="btn" onclick="removeNodes()" value="删除子节点"/>
  </div>
</div>
</body>
</html>

2、实现效果图:

(1)初始化

jQuery插件zTree实现删除树子节点的方法示例

(2)选择“武汉”,然后单击“删除子节点”

jQuery插件zTree实现删除树子节点的方法示例

(3)选择“武汉市”,然后单击“删除子节点”,不能再删除子节点

jQuery插件zTree实现删除树子节点的方法示例

3、源码说明

//删除选中的子节点
treeObj.removeChildNodes(nodes[i]);

附:zTree_v3插件点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
JS实现随机点名器
Apr 12 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 #Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 #Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 #Javascript
教你用十行node.js代码读取docx的文本
Mar 08 #Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 #Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 #Javascript
原生js实现放大镜特效
Mar 08 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
短波问题解答
2021/02/28 无线电
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue实现文字加密功能
2019/09/27 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
理解Python垃圾回收机制
2016/02/12 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python中cPickle类使用方法详解
2018/08/27 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
2014年教师培训的自我评价
2014/01/03 职场文书
学生生病请假条范文
2014/02/16 职场文书
大学英语专业求职信
2014/06/21 职场文书
2014年后勤工作总结
2014/11/18 职场文书
文明班级申报材料
2014/12/24 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书