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: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.removeNode(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、说明

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

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

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

Javascript 相关文章推荐
基于jquery库的tab新形式使用
Nov 16 Javascript
瀑布流布局代码一例
Apr 11 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 #Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 #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
You might like
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
经验几则 推荐
2006/09/05 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
想学python 这5本书籍你必看!
2018/12/11 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
管理信息系学生的自我评价
2014/01/11 职场文书
劳动竞赛口号
2014/06/16 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
解决Redis启动警告问题
2022/02/24 Redis