首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap table 实现树形表格联动选中联动取消功能

Posted in Javascript onSeptember 30, 2019

公司最近有需求要做树形式table。因为是前后端不分离项目，且之前已经引入了bootstrap table插件，现把实现方式分享一下：

<!DOCTYPE HTML>
<html lang="zh-cn">

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta content="width=device-width,initial-scale=1.0" name="viewport">
 <meta content="yes" name="apple-mobile-web-app-capable">
 <meta content="black" name="apple-mobile-web-app-status-bar-style">
 <meta content="telephone=no" name="format-detection">
 <meta content="email=no" name="format-detection">
 <title>系统管理</title>
 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="external nofollow" >
</head>

<body>
<div class="container">
 <h1>树形表格 ： Table Treegrid</h1>
 <table id="table"></table>
 <br/>
 <button onclick="test()">选择</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script type="text/javascript">
 var $table = $('#table');
 var data = [{0: undefined, id: 94710, pid: 0, mode: "系统管理", permissionTag: "*", permissionMark: "所有权限", }
,{0: undefined, id: 94711, pid: 94710, mode: "营销中心管理", permissionTag: "*", permissionMark: "所有权限",}
,{0: undefined, id: 471104, pid: 94711, mode: "营销中心管理", permissionTag: "search", permissionMark: "查询",}
,{0: undefined, id: 94721, pid: 94710, mode: "工厂管理", permissionTag: "*", permissionMark: "所有权限", }
,{0: undefined, id: 472104, pid: 94721, mode: "工厂管理", permissionTag: "search", permissionMark: "查询", }
,{0: undefined, id: 94731, pid: 94710, mode: "经销商管理", permissionTag: "*", permissionMark: "所有权限", }
,{0: undefined, id: 473104, pid: 94731, mode: "经销商管理", permissionTag: "search", permissionMark: "查询", }
,{0: undefined, id: 94732, pid: 94710, mode: "产品管理", permissionTag: "*", permissionMark: "所有权限", }
,{0: undefined, id: 473201, pid: 94732, mode: "产品管理", permissionTag: "insert", permissionMark: "添加", }
,{0: undefined, id: 473202, pid: 94732, mode: "产品管理", permissionTag: "update", permissionMark: "修改", }
, {0: undefined, id: 473203, pid: 94732, mode: "产品管理", permissionTag: "delete", permissionMark: "删除", }
, {0: undefined, id: 473204, pid: 94732, mode: "产品管理", permissionTag: "search", permissionMark: "查询", }
, {0: undefined, id: 94741, pid: 94710, mode: "用户账号", permissionTag: "*", permissionMark: "所有权限", }
, {0: undefined, id: 474101, pid: 94741, mode: "用户账号", permissionTag: "insert", permissionMark: "添加", }
, {0: undefined, id: 474102, pid: 94741, mode: "用户账号", permissionTag: "update", permissionMark: "修改", }
, {0: undefined, id: 474103, pid: 94741, mode: "用户账号", permissionTag: "delete", permissionMark: "删除", }
, {0: undefined, id: 474104, pid: 94741, mode: "用户账号", permissionTag: "search", permissionMark: "查询", }
, {0: undefined, id: 474105, pid: 94741, mode: "用户账号", permissionTag: "resetPwd", permissionMark: "重置密码", }
, {0: undefined, id: 94742, pid: 94710, mode: "角色权限管理", permissionTag: "*", permissionMark: "所有权限", }
, {0: undefined, id: 474201, pid: 94742, mode: "角色权限管理", permissionTag: "insert", permissionMark: "添加", }
, {0: undefined, id: 474202, pid: 94742, mode: "角色权限管理", permissionTag: "update", permissionMark: "修改", }
, {0: undefined, id: 474203, pid: 94742, mode: "角色权限管理", permissionTag: "delete", permissionMark: "删除", }
, {0: undefined, id: 474204, pid: 94742, mode: "角色权限管理", permissionTag: "search", permissionMark: "查询", }
, {0: undefined, id: 94760, pid: 0, mode: "运营中心", permissionTag: "*", permissionMark: "所有权限", }
, {0: undefined, id: 94770, pid: 94760, mode: "跨区域调拨单", permissionTag: "*", permissionMark: "所有权限", }
, {0: undefined, id: 476104, pid: 94770, mode: "跨区域调拨单", permissionTag: "search", permissionMark: "查询", }
, {0: undefined, id: 476105, pid: 94770, mode: "跨区域调拨单", permissionTag: "download", permissionMark: "下载", }]

 $(function() {

  //控制台输出一下数据
  console.log(data);

  $table.bootstrapTable({
   data:data,
   idField: 'id',
   dataType:'jsonp',
   columns: [
    { field: 'check', checkbox: true, formatter: function (value, row, index) {
      if (row.check == true) {
       // console.log(row.serverName);
       //设置选中
       return { checked: true };
      }
     }
    },
    { field: 'mode', title: '名称' },
    { field: 'permissionTag', title: '状态', },
    { field: 'permissionMark', title: '权限值' },
   ],
   // bootstrap-table-treegrid.js 插件配置 -- start
   //在哪一列展开树形
   treeShowField: 'mode',
   //指定父id列
   parentIdField: 'pid',

   onResetView: function(data) {
    //console.log('load');
    $table.treegrid({
     // initialState: 'collapsed',// 所有节点都折叠
     initialState: 'expanded',// 所有节点都展开，默认展开
     treeColumn: 1,
     // expanderExpandedClass: 'glyphicon glyphicon-minus', //图标样式
     // expanderCollapsedClass: 'glyphicon glyphicon-plus',
     onChange: function() {
      $table.bootstrapTable('resetWidth');
     }
    });
    //只展开树形的第一级节点
    $table.treegrid('getRootNodes').treegrid('expand');
   },
   onCheck:function(row){
    event.preventDefault()
    var datas = $table.bootstrapTable('getData');
    console.log(datas)
    row.check = true
    // 勾选子类
    selectChilds(datas,row,"id","pid",true);
    // 勾选父类
    selectParentChecked(datas,row,"id","pid")

    // 刷新数据
    $table.bootstrapTable('load', datas);
   },

   onUncheck:function(row){
    event.preventDefault()
    row.check = false
    var datas = $table.bootstrapTable('getData');
    selectChilds(datas,row,"id","pid",false);
    //取消选中最后一个子元素时时查找对应父元素取消
    selectParentUnchecked(datas,row,"id","pid")
    $table.bootstrapTable('load', datas);
   },
   // bootstrap-table-treetreegrid.js 插件配置 -- end
  });
 });

 
</script>
<script>
 /**
  * 选中父项时，同时选中子项
  * @param datas 所有的数据
  * @param row 当前数据
  * @param id id 字段名
  * @param pid 父id字段名
  */
 function selectChilds(datas,row,id,pid,checked) {
  console.log("zi",datas,'row',row,'check',checked)
  for(var i in datas){
   if(datas[i][pid] == row[id]){
    datas[i].check=checked;
    selectChilds(datas,datas[i],id,pid,checked);
   };
  }
 }

 function selectParentUnchecked(datas,row,id,pid){
  console.log("fu--Uncheck",datas,'row',row,)
  let key = 0;
  for(var i in datas){
  if(datas[i].pid == row.pid && datas[i].check == true){
   key++
  }
  }
  console.log(key)
  if(key == 0 ){
  for(var i in datas){
   if(datas[i][id] == row[pid]){
   datas[i].check=false;
   selectParentUnchecked(datas,datas[i],id,pid);
   }
  }
  }
 }

 function selectParentChecked(datas,row,id,pid){
  for(var i in datas){
   if(datas[i][id] == row[pid]){
    datas[i].check=true;
    selectParentChecked(datas,datas[i],id,pid);
   };
  }
 }

 function test() {
  var selRows = $table.bootstrapTable("getSelections");
  if(selRows.length == 0){
   alert("请至少选择一行");
   return;
  }
  var postData = "";
  $.each(selRows,function(i) {
   postData += this.id;
   if (i < selRows.length - 1) {
    postData += "， ";
   }
  });
  alert("你选中行的 id 为："+postData);
 }
</script>
</html>

实现的效果图为：

Bootstrap table 实现树形表格联动选中联动取消功能

总结

以上所述是小编给大家介绍的Bootstrap table 实现树形表格联动选中联动取消功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Bootstrap table 实现树形表格联动选中联动取消功能

- Author -

九九儿

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
vue vuex vue-rouert后台项目——权限路由（适合初学）
Dec 29 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 #Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 #Javascript
浅探express路由和中间件的实现
Sep 30 #Javascript
JavaScript实现单图片上传并预览功能
Sep 30 #Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 #Javascript
laravel实现中文和英语互相切换的例子
Sep 30 #Javascript
JavaScript键盘事件响应顺序详解
Sep 30 #Javascript
忘记密码(1) muduo(1) TcpServer(1) B+树(2) 存储过程(3) pt-archiver(1) instantclient(1) redo log(1) 增删改查(2) 优化(1)
You might like
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较？
2011/10/17 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JavaScript包装对象使用介绍
2013/08/29 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python中import学习备忘笔记
2017/01/24 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
德国的各种媒体在线商店：Thalia.de（书籍、电子书、玩具等）
2020/10/08 全球购物
Penhaligon’s英国官网：成立于1870年的英国香水制造商
2021/02/18 全球购物
小学毕业感言500字
2014/02/28 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js