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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
原生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
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
微信小程序 上传头像的实例详解
2017/10/27 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python的面向对象思想分析
2015/01/14 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
应聘自荐信
2013/12/14 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
信用卡收入证明范本
2015/06/12 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js