bootstrap复杂表格

1.先生成外层表格：

$('#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
                });

            }