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 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
原生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
Git命令之分支详解
2021/03/02 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python库urllib与urllib2主要区别分析
2014/07/13 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
python处理二进制数据的方法
2015/06/03 Python
使用python实现rsa算法代码
2016/02/17 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python的faker库用法
2019/11/28 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
旅游管理专业个人求职信范文
2013/12/24 职场文书
教师节活动主持词
2014/04/02 职场文书
文明好少年事迹材料
2014/08/19 职场文书
小学师德师风整改措施
2014/10/27 职场文书
博士生专家推荐信
2015/03/25 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android