溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
什么是Bootstrap-table？
在業(yè)務系統(tǒng)開發(fā)中，對表格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發(fā)中，可以采用很多功能強大的插件來滿足要求，且能極大的提高開發(fā)效率，本隨筆介紹這個bootstrap-table是一款非常有名的開源表格插件，在很多項目中廣泛的應用。Bootstrap-table插件提供了非常豐富的屬性設置，可以實現(xiàn)查詢、分頁、排序、復選框、設置顯示列、Card view視圖、主從表顯示、合并列、國際化處理等處理功能，而且該插件同時也提供了一些不錯的擴展功能，如移動行、移動列位置等一些特殊的功能，插件可以用基于HTML5的data-*屬性標識設置，也可以使用Javascript方式進行設置，非常方便。本篇隨筆介紹bootstrap-table插件在我實際項目中的應用情況，總結相關使用中碰到的問題處理經(jīng)驗。
Bootstrap Table 獲取單擊或雙擊的行內(nèi)容
說明：看到這個應該就知道了bootstrap table的用法及如何使用了，所以下面的名稱就不介紹了
•realTime_Table是表的id
$("#realTime_Table").bootstrapTable({
//還是稍微介紹一下吧，這些注釋是額外的，要加錢
//是否顯示查找
search: false,
//是否分頁
pagination: false,
//每頁顯示多少條數(shù)據(jù)，也就是要顯示多少行
pageSize: 15,
//分頁，選擇不同數(shù)字會改變上面的pageSize
pageList: [5, 10, 15, 20],
//顯示列
showColumns: true,
//顯示刷新按鈕
showRefresh: false,
//是否可見
showToggle: true,
//默認英文，設置如下就是顯示中文
locale: "zh-CN",
//顯示時background-color白灰相間
striped: true,
/*
*
*
*
*
*下面才是本文要介紹的，其他都是額外的，包括這句話
*
*
*
*
*/
//=======================================================================================
//雙擊觸發(fā)的事件，當雙擊就會獲取row，row就是該整行的內(nèi)容，其中"row.playerName"中"playerName"是data-field定義的字段，（如果在js中定義，就是field定義的字段,）可以通過該方法獲取該行所有列的值
onDblClickRow: function (row) {
console.log("click:" + row.playerName)
}
//=======================================================================================
//如果想單擊獲取row，把onDblClickRow改為onClickRow，如下
//onClickRow: function (row) {
// console.log("click:" + row.playerName)
// }
//=======================================================================================
//想獲取全表的內(nèi)容，只要用下面的方法,其中allTableData是個數(shù)組，整張表的內(nèi)容，你可以使用遍歷獲取每行的內(nèi)容，也可以使用索引直接獲取你想要的那行的內(nèi)容
var indexTemp = 0;
var playerNameTemp = '張小帥';
var allTableData = $('#realTime_Table').bootstrapTable('getData');
for(var i = 0; i < allTableData.length; i++) {
indexTemp = i;
//如果此行中有玩家名字（此處默認名字不重復）與你想獲取的相同，則跳出循環(huán)，indexTemp是你要的行索引
if(allTableData[i].playerName == playerNameTemp) {
break;
}
}
console.log("玩家張小帥的數(shù)據(jù)在表的第" + (indexTemp + 1) + "行");
});
題外：關于表字段設置，可以查看：點擊Bootstrap-table的右側邊欄Usage跳到最下面，有兩種方法，一種是在聲明表屬性中設置，另一種是在js中設置
其他相關：
•BootstrapTable實現(xiàn)定時刷新數(shù)據(jù)： //www.jb51.net/article/145535.htm
總結
以上所述是小編給大家介紹的Bootstrap Table 雙擊、單擊行獲取該行及全表內(nèi)容，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
