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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
用js编写留言板
Mar 17 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 字符串替换的方法
2012/01/10 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
python 实现图片裁剪小工具
2021/02/02 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
成绩单公证书
2014/04/10 职场文书
团支部建设方案
2014/05/02 职场文书
酒店温馨提示语
2015/07/14 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android