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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
详解Vue调用手机相机和相册以及上传
May 05 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
小程序实现上传视频功能
Aug 18 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
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python构造函数init实例方法解析
2020/01/19 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
Android interview questions
2016/12/25 面试题
网络安全方面的面试题
2015/11/04 面试题
学生会主席就职演讲稿
2014/01/14 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
老公给老婆的保证书
2014/04/28 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python