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 相关文章推荐
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
js select常用操作控制代码
2010/03/16 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
python读取LMDB中图像的方法
2018/07/02 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Python谱减法语音降噪实例
2019/12/18 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
What is view? why do we have view?
2012/06/22 面试题
幼儿园儿童节主持词
2014/03/21 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL