bootstrap table复杂操作代码


Posted in Javascript onNovember 01, 2016

本文实例为大家分享了bootstrap table复杂操作,如何生成外层表格,如何填充表格内容,供大家参考,具体内容如下

1、先生成外层表格:

bootstrap table复杂操作代码

$('#tableActivity').bootstrapTable('destroy').bootstrapTable({
  url:'',
  detailView:true,
  detailFormatter:"detailFormatter",//点击展开预先执行事件
  cache: false,
  height: 550,
  showExport: true,
  exportDataType: "all", 
  pagination: true,
  pageSize: 10,
  pageList: [10, 25, 50, 100],
  search: true,
  searchAlign:'left',
  showRefresh: true,
  showToggle: true,
  showColumns: true,
  toolbarAlign: 'right',
  toolbar:"#toolbar",
  buttonsAlign:'left',
  clickToSelect: true,
  idField:'',
  columns: [
   [
    {
    title:'编号',
    field: 'index',
    rowspan: 2,
    align: 'center',
    valign: 'middle'
    }, {
    title: '姓名',
    field: 'userName',
    rowspan: 2,
    align: 'center',
    valign: 'middle',
    sortable: true

    }, {
    title: '讲义',
    colspan: 3,
    align: 'center'
    }, {
    title: '视频',
    colspan: 3,
    align: 'center'
    }, {
    title: '总完成情况',
    colspan: 3,
    align: 'center'
    }
   ],
   [
    {
    field: 'handoutCount',
    title: '讲义总数',
    sortable: true,
    align: 'center'
    }, {
    field: 'handoutComCount',
    title: '完成数',
    sortable: true,
    align: 'center'

    }, {
    field: 'handoutCountDegree',
    title: '完成率',
    sortable: true,
    align: 'center'


    }, {
    field: 'videoCount',
    title: '视频总数',
    sortable: true,
    align: 'center'


    }, {
    field: 'videoComCount',
    title: '完成数',
    sortable: true,
    align: 'center'


    }, {
    field: 'videoCountDegree',
    title: '完成率',
    sortable: true,
    align: 'center'


    }, {
    field: 'allCount',
    title: '总数',
    sortable: true,
    align: 'center'


    }, {
    field: 'allComCount',
    title: '总完成数',
    sortable: true,
    align: 'center'


    }, {
    field: 'allDegree',
    title: '总完成率',
    sortable: true,
    align: 'center'


    }
   ]

   ]

 });

2、生成展开之后的表格内容:

function detailFormatter(index, row) {
  handoutColums=[];
  handoutData=[];
  videoColums=[];
  videoData=[];
  var html = [];
  html.push('<div class="row">');
  html.push('<div class="col-md-6">');
  html.push('<table id="tableHandout'+index+'"></table>');
  html.push('</div>');
  html.push('<div class="col-md-6">');
  html.push('<table id="tableVideo'+index+'"></table>');
  html.push('</div>');
  html.push('</div>');
  handoutColums.push({
   field: 'handoutIndex',title: '编号', sortable: true ,width: 150
  },{
   field: 'handoutName',title: '讲义名称', sortable: true ,width: 150
  },{
   field: 'degree',title: '完成度', sortable: true ,width: 150
  });
  videoColums.push({
   field: 'videoIndex',title: '编号', sortable: true ,width: 150
  },{
   field: 'videoName',title: '视频名称', sortable: true ,width: 150
  },{
   field: 'degree',title: '完成度', sortable: true ,width: 150
  });
  $.each(row, function (key, value) {
   if(key=="handout"){
   $.each(value,function(index,handout){
   var row = {};
   row['handoutIndex'] = index+1;
   row['handoutName']=handout.handoutName;
   row['degree']=handout.degree;
   handoutData.push(row);

   });
   }
   if(key=="video"){
   $.each(value,function(index,video){
   var row = {};
   row['videoIndex']=index+1;
   row['videoName']=video.videoName;
   row['degree']=video.degree;
   videoData.push(row);
   });
   }
  });

  return html.join('');
  }

3、填充表格内容:

$('#tableActivity').on('expand-row.bs.table', function (e, index, row, $detail) {
  initHandoutTable(handoutColums,handoutData,index);
  initVideoTable(videoColums,videoData,index);
  }); 

  function initHandoutTable(colums,data,index){


  $('#tableHandout'+index).bootstrapTable('destroy').bootstrapTable({
   cache: false,
   height: 200,
   clickToSelect: true,
   idField:'',
   columns:colums,
   data:data
  });

  }

  function initVideoTable(colums,data,index){


  $('#tableVideo'+index).bootstrapTable('destroy').bootstrapTable({
   cache: false,
   height: 200,
   clickToSelect: true,
   idField:'',
   columns:colums,
   data:data
  });

  }

bootstrap table复杂操作代码

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程 Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
bootstrap flask登录页面编写实例
Nov 01 #Javascript
JS弹出窗口的运用与技巧大全
Nov 01 #Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 #Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 #Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 #Javascript
jQuery动态生成Bootstrap表格
Nov 01 #Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 #Javascript
You might like
php仿ZOL分页类代码
2008/10/02 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
js实现网页随机验证码
2020/10/19 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
详解Python迭代和迭代器
2016/03/28 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python ssh 执行shell命令的示例
2020/09/29 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
4s店机修工岗位职责
2013/12/20 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
百日安全活动总结
2014/05/04 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
企业法人任命书
2015/09/21 职场文书
Golang bufio详细讲解
2022/04/21 Golang
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python