bootstrap table復(fù)雜操作代碼
更新時(shí)間：2016年11月01日 15:33:13 作者：minsgo
這篇文章主要為大家詳細(xì)介紹了bootstrap table復(fù)雜操作代碼，生成外層表格，填充表格內(nèi)容,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap table復(fù)雜操作，如何生成外層表格，如何填充表格內(nèi)容，供大家參考，具體內(nèi)容如下
1、先生成外層表格：
$('#tableActivity').bootstrapTable('destroy').bootstrapTable({
url:'',
detailView:true,
detailFormatter:"detailFormatter",//點(diǎn)擊展開(kāi)預(yù)先執(zhí)行事件
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:'編號(hào)',
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: '講義總數(shù)',
sortable: true,
align: 'center'
}, {
field: 'handoutComCount',
title: '完成數(shù)',
sortable: true,
align: 'center'
}, {
field: 'handoutCountDegree',
title: '完成率',
sortable: true,
align: 'center'
}, {
field: 'videoCount',
title: '視頻總數(shù)',
sortable: true,
align: 'center'
}, {
field: 'videoComCount',
title: '完成數(shù)',
sortable: true,
align: 'center'
}, {
field: 'videoCountDegree',
title: '完成率',
sortable: true,
align: 'center'
}, {
field: 'allCount',
title: '總數(shù)',
sortable: true,
align: 'center'
}, {
field: 'allComCount',
title: '總完成數(shù)',
sortable: true,
align: 'center'
}, {
field: 'allDegree',
title: '總完成率',
sortable: true,
align: 'center'
}
]
]
});
2、生成展開(kāi)之后的表格內(nèi)容：
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: '編號(hào)', sortable: true ,width: 150
},{
field: 'handoutName',title: '講義名稱', sortable: true ,width: 150
},{
field: 'degree',title: '完成度', sortable: true ,width: 150
});
videoColums.push({
field: 'videoIndex',title: '編號(hào)', 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、填充表格內(nèi)容：
$('#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
});
}
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程 Bootstrap插件使用教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用electron制作滿屏心特效的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
基于Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法
不知道大家有沒(méi)有發(fā)現(xiàn)在現(xiàn)在的移動(dòng)頁(yè)面上，有很多情況需要加載大量的資源。但是移動(dòng)端的訪問(wèn)速度和pc還是有很大的差距，有些時(shí)候需要一些取巧的方式來(lái)提升用戶體驗(yàn)，而實(shí)時(shí)顯示加載進(jìn)度就是其中一種。這篇文章就給大家分享了Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法。2016-10-10
小程序canvas實(shí)現(xiàn)畫(huà)布半圓環(huán)
這篇文章主要為大家詳細(xì)介紹了小程序canvas實(shí)現(xiàn)畫(huà)布半圓環(huán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
程序中很多數(shù)據(jù)是動(dòng)態(tài)拼接而成的json數(shù)據(jù)，最近在用json的時(shí)候老是現(xiàn)JSON.parse錯(cuò)誤2010-07-07
詳解通用webpack多頁(yè)面自動(dòng)導(dǎo)入方案
本文主要介紹了通用webpack多頁(yè)面自動(dòng)導(dǎo)入方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript設(shè)計(jì)模式之裝飾者模式定義與應(yīng)用示例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之裝飾者模式定義與應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript裝飾者模式的原理、定義及應(yīng)用方法,需要的朋友可以參考下2018-07-07
JavaScript中Object.values()的用法舉例
這篇文章主要給大家介紹了關(guān)于JavaScript中Object.values()的用法舉例,Object.values()是JavaScript中一個(gè)內(nèi)置的靜態(tài)函數(shù),用于返回一個(gè)對(duì)象中所有屬性值的數(shù)組,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了JavaScript的冒泡排序，對(duì)其進(jìn)行示例解析，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要介紹了微信小程序防止重復(fù)點(diǎn)擊按鈕的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10