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 相关文章推荐
jQuery Validate表单验证入门学习
Dec 18 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 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
如何使用PHP获取网络上文件
2006/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
大学三年的自我评价
2013/12/25 职场文书
小学生优秀评语大全
2014/04/22 职场文书
文明城市创建标语
2014/06/16 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
护士业务学习心得体会
2016/01/25 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers
Android中的Launch Mode详情
2022/06/05 Java/Android