首页
所有分类
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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
ie和firefox中img对象区别的困惑
Dec 27 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Bootstrap每天必学之工具提示（Tooltip）插件
Apr 26 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
详解微信小程序实现跑马灯效果（附完整代码）
Apr 29 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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
update(2) 全局锁(1) 索尼ICF-36(1) 德生2P3(1) SnakeGame(1) 备份(2) 贪吃蛇(2) 索引(8) python小游戏(5) 数据库卡死(1)
You might like
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
Python 解析XML文件
2009/04/15 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python数据可视化实现正态分布（高斯分布）
2019/08/21 Python
6行Python代码实现进度条效果（Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库）
2020/01/06 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
Nixon手表英国官网：美国尼克松手表品牌
2020/02/10 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
售后专员岗位职责
2013/12/08 职场文书
办理暂住证介绍信
2014/01/11 职场文书
出纳员的岗位职责
2014/02/22 职场文书
村抢险救灾方案
2014/05/09 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
民事和解协议书格式
2014/11/29 职场文书
停电调休通知
2015/04/16 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS