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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
vue中英文切换实例代码
Jan 21 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
example1.php
2006/10/09 PHP
php中目录,文件操作详谈
2007/03/19 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
webpack搭建vue 项目的步骤
2017/12/27 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python计算二维矩形IOU实例
2020/01/18 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
创意活动策划书
2014/01/15 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python