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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JS数据类型分类及常用判断方法
Nov 19 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分页显示制作详细讲解
2006/12/05 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
js 分栏效果实现代码
2009/08/29 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
庆八一活动方案
2014/01/25 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
生产助理岗位职责
2014/06/18 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
Python+Appium新手教程
2021/04/17 Python