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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
js获取ajax返回值代码
Apr 30 Javascript
js读写json文件实例代码
Oct 21 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 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
搜索引擎技术核心揭密
2006/10/09 PHP
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php执行sql语句的写法
2009/03/10 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php strftime函数的详细用法
2018/06/21 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Node.js之readline模块的使用详解
2019/03/25 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python挖矿算力测试程序详解
2019/07/03 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
《凡卡》教学反思
2014/04/09 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
考察邀请函范文
2015/01/31 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
python如何读取和存储dict()与.json格式文件
2022/06/25 Python