溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
怎么實(shí)現(xiàn)BootStrapTable的動(dòng)態(tài)表格？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
本篇文章將為大家介紹如何使用bootstrap table插件來實(shí)現(xiàn)動(dòng)態(tài)表格。
在我們構(gòu)建BootStrapTable(下文中均稱：BsTable)，其中columns參數(shù)作為表格列的內(nèi)容存儲(chǔ)，我們的需求是根據(jù)返回的數(shù)據(jù)動(dòng)態(tài)的生成columns參數(shù)的內(nèi)容。從而生成動(dòng)態(tài)表格。
columns參數(shù)格式：類似下文
columns: {
{
field: 'Id',
title: '編號(hào)',
},{
field: 'name',
title: '名稱',
},{
field: 'sex',
title: '性別',
//自定義方法
formatter: function (value) {
if (value == 1) {
return '男';
} else if (value == 2) {
retuen '女';
}
}
},
}需求：通過點(diǎn)擊按鈕發(fā)送ajax請(qǐng)求，針對(duì)請(qǐng)求返回的數(shù)據(jù)進(jìn)行動(dòng)態(tài)表格的構(gòu)建。
按鈕構(gòu)造：設(shè)置點(diǎn)擊事件
<button type="button" class="btn btn-primary" onclick="DataQuery.sqlExecute()">
<i class="fa fa-check"></i> SQL語句執(zhí)行
</button>點(diǎn)擊事件編寫：dataQuery.js (注意：這里將逐段解析，最后將貼上完整版代碼)
1、獲取html頁面元素值
由于實(shí)現(xiàn)該功能的需要兩個(gè)參數(shù)：SQL語句(sql) + 連接信息(connectInfo) ，所以要先從頁面上獲取兩個(gè)元素的值：類選擇器選擇元素獲取對(duì)應(yīng)值。
var sql = $('#sql').val();
var connectInfo = $('#connectInfo').val();2、選定頁面表格元素，發(fā)送ajax請(qǐng)求，構(gòu)建BSTable
頁面上的表格元素：采用beetl的標(biāo)簽，將重復(fù)使用的html代碼用一行代碼標(biāo)簽代替，方便使用，易于維護(hù)。
<#table id="DataQueryTable"/>
2.1 ajax請(qǐng)求參數(shù)配置
| 參數(shù) | 含義 |
|---|---|
| type | 請(qǐng)求類型 |
| url | 請(qǐng)求鏈接地址 |
| contentType | 發(fā)送給服務(wù)器的格式 |
| dataType | 收到數(shù)據(jù)的格式 |
| data | 發(fā)送給服務(wù)端的數(shù)據(jù) |
| success | 請(qǐng)求成功時(shí)調(diào)用 |
| error | 請(qǐng)求失敗時(shí)調(diào)用 |
詳細(xì)代碼：
$('#DataQueryTable').bootstrapTable({
ajax: function (request) {
$.ajax({
type: "GET",
url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
contentType: "application/json;charset=utf-8",
dataType: "json",
json: 'callback',
success: 見下文
error: 見下文
})
})2.2 ajax請(qǐng)求成功，根據(jù)返回json數(shù)據(jù)構(gòu)造動(dòng)態(tài)表頭
2.2.1 初始化自定義動(dòng)態(tài)表頭數(shù)組
//定義動(dòng)態(tài)表頭字段數(shù)組
var dynamicHeader = [];
//向數(shù)組中填入屬性
dynamicHeader.push({
field: "state",
check: true
});2.2.2 動(dòng)態(tài)表頭生成
//針對(duì)返回的json數(shù)據(jù)，遍歷json數(shù)據(jù)的key集合
for (var i = 0; i<(Object.keys(json[0])).length; i++) {
//獲取對(duì)應(yīng)索引的value值，將獲取的值設(shè)置到動(dòng)態(tài)表頭字段中。
var property = (Object.keys(json[0]))[i];
dynamicHeader.push({
"title": property,
"field": property,
//顯示是否顯示隱藏
switchable: true,
//是否開啟排序
sortable: true
});
}這段代碼我們可以結(jié)合瀏覽器F12，查看Object.keys(json[0])中的具體內(nèi)容：模擬一個(gè)請(qǐng)求/test。
2.2.3 構(gòu)造表格，構(gòu)造表格前要進(jìn)行table銷毀，否則會(huì)保留上次加載的內(nèi)容
$('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
//得到的json數(shù)據(jù)，會(huì)根據(jù)columns參數(shù)進(jìn)行對(duì)應(yīng)賦值配置
data: json,
//Bstable工具導(dǎo)航條
toolbar: '#toolbar',
//瀏覽器緩存，默認(rèn)為true，設(shè)置為false避免頁面刷新調(diào)用瀏覽器緩存
cache: false,
//是否顯示行間隔色
striped: true,
//分頁方式：client客戶端分頁，server服務(wù)端分頁
sidePagination: "client",
//排序方式
sortOrder: "desc",
//每頁記錄行數(shù)
pageSize: 25,
//初始化加載第一頁
pageNumber: 1,
//可供選擇的每頁行數(shù)
pageList: "[25, 50, 100, All]",
//是否顯示切換按鈕
showToggle: true,
//是否顯示所有的列
showColumns: true,
//是否顯示導(dǎo)出按鈕(下篇文章將會(huì)提到)
showExport: true,
//導(dǎo)出數(shù)據(jù)類型(下篇文章將會(huì)提到)
exportDataType: "basic",
//是否顯示分頁
pagination: true,
//是否啟用全匹配搜索，否則為模糊搜索
strictSearch: true,
//開啟搜索
search: true,
//自定義所生成的動(dòng)態(tài)表頭放入，結(jié)合上述json數(shù)據(jù)，實(shí)現(xiàn)表格數(shù)據(jù)內(nèi)容的構(gòu)建
columns: dynamicHeader
});
},2.3 ajax請(qǐng)求失敗，彈窗報(bào)告錯(cuò)誤信息，頁面重加載
error: function () {
alert("SQL查詢錯(cuò)誤，請(qǐng)輸入正確的SQL語句！");
location.reload();
}完整js代碼
/**
* BsTable動(dòng)態(tài)表格生成
*/
DataQuery.sqlExecute = function (){
var sql = $('#sql').val();
var connectInfo = $('#connectInfo').val();
$('#DataQueryTable').bootstrapTable({
ajax: function (request) {
$.ajax({
type: "GET",
url: Feng.ctxPath + "/dataQuery/list" + "/" + sql + "/" + connectInfo,
contentType: "application/json;charset=utf-8",
dataType: "json",
json: 'callback',
success: function (json) {
var dynamicHeader = [];
dynamicHeader.push({
field: "state",
check: true
});
for (var i = 0; i<(Object.keys(json[0])).length; i++) {
var property = (Object.keys(json[0]))[i];
//console.log(property);
dynamicHeader.push({
"title": property,
"field": property,
switchable: true,
sortable: true
});
}
//console.log(Object.keys(json[0]));
$('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
data: json,
toolbar: '#toolbar',
cache: false,
striped: true,
sidePagination: "client",
sortOrder: "desc",
pageSize: 25,
pageNumber: 1,
pageList: "[25, 50, 100, All]",
showToggle: true,
showColumns: true,
showExport: true,
exportDataType: "basic",
pagination: true,
strictSearch: true,
search: true,
columns: dynamicHeader
});
},
error: function () {
alert("SQL查詢錯(cuò)誤，請(qǐng)輸入正確的SQL語句！");
location.reload();
}
});
}
});
};3.測(cè)試動(dòng)態(tài)表格生成結(jié)果
3.1 測(cè)試分兩部分，首先獲取請(qǐng)求所得到的json數(shù)據(jù)，模擬請(qǐng)求獲取100條數(shù)據(jù)
@RequestMapping(value = "/test")
@ResponseBody
public Object test(){
return iDataQueryService.windQuery("SELECT TOP 100 [OBJECT_ID]\n" +
" ,[S_INFO_WINDCODE]\n" +
" ,[S_CON_WINDCODE]\n" +
" ,[S_CON_INDATE]\n" +
" ,[S_CON_OUTDATE]\n" +
" ,[CUR_SIGN]\n" +
" ,[OPDATE]\n" +
" ,[OPMODE]\n" +
" FROM [WIND].[db_datareader].[AINDEXMEMBERS]");
}3.2 查看請(qǐng)求所返回的json數(shù)據(jù)
3.3測(cè)試動(dòng)態(tài)表格生成
上述的請(qǐng)求可以正常返回?cái)?shù)據(jù)，那我們通過ajax請(qǐng)求所構(gòu)建的動(dòng)態(tài)BSTable呢？
請(qǐng)求為：SQL語句/鏈接信息，ajax請(qǐng)求返回json數(shù)據(jù)，與上述請(qǐng)求一致。
查看我們的動(dòng)態(tài)表格生成狀況：
賓果，至此BootStrapTable動(dòng)態(tài)表格功能已實(shí)現(xiàn)。
關(guān)于怎么實(shí)現(xiàn)BootStrapTable的動(dòng)態(tài)表格問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼