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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
js实现简单的计算器功能
Jan 16 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
解析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
处理php自动反斜杠的函数代码
2010/01/05 PHP
php的ajax简单实例
2014/02/27 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP重载基础知识回顾
2020/09/10 PHP
jquery 图片轮换效果
2010/07/29 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
小程序关于请求同步的总结
2019/05/05 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python使用arcpy.mapping模块批量出图
2017/03/06 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python 实现链表实例代码
2017/04/07 Python
用Python设计一个经典小游戏
2017/05/15 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
2014年党支部学习材料
2014/05/19 职场文书
个人自荐材料
2014/05/23 职场文书
骨干教师申报材料
2014/12/17 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
家长会开场白和结束语
2015/05/29 职场文书
心灵点滴观后感
2015/06/02 职场文书
校园安全学习心得体会
2016/01/18 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
新手入门Mysql--概念
2021/06/18 MySQL