首页
所有分类
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 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
jQuery选择器基础入门教程
May 10 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
xmlplus组件设计系列之路由（ViewStack)（7）
May 02 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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
lamp(1) 二级域名(1) 443(1) SSL(3) URL重定向(3) Centos(8) 伪静态(1) 压力测试(1) lnmp(1) 跨域(4)
You might like
《Re：从零开始的异世界生活》剧情体验，手游新作定名
2020/04/09 日漫
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
参考：关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
详解python with 上下文管理器
2020/09/02 Python
项目投资意向书
2014/04/01 职场文书
法制宣传教育方案
2014/05/09 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
资产移交协议书
2016/03/24 职场文书
2019年行政人事个人工作总结范本！
2019/07/19 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技