Bootstrap Table 雙擊、單擊行獲取該行及全表內(nèi)容
什么是Bootstrap-table?
在業(yè)務(wù)系統(tǒng)開發(fā)中,對(duì)表格記錄的查詢、分頁、排序等處理是非常常見的,在Web開發(fā)中,可以采用很多功能強(qiáng)大的插件來滿足要求,且能極大的提高開發(fā)效率,本隨筆介紹這個(gè)bootstrap-table是一款非常有名的開源表格插件,在很多項(xiàng)目中廣泛的應(yīng)用。Bootstrap-table插件提供了非常豐富的屬性設(shè)置,可以實(shí)現(xiàn)查詢、分頁、排序、復(fù)選框、設(shè)置顯示列、Card view視圖、主從表顯示、合并列、國際化處理等處理功能,而且該插件同時(shí)也提供了一些不錯(cuò)的擴(kuò)展功能,如移動(dòng)行、移動(dòng)列位置等一些特殊的功能,插件可以用基于HTML5的data-*屬性標(biāo)識(shí)設(shè)置,也可以使用Javascript方式進(jìn)行設(shè)置,非常方便。本篇隨筆介紹bootstrap-table插件在我實(shí)際項(xiàng)目中的應(yīng)用情況,總結(jié)相關(guān)使用中碰到的問題處理經(jīng)驗(yàn)。
Bootstrap Table 獲取單擊或雙擊的行內(nèi)容
說明:看到這個(gè)應(yīng)該就知道了bootstrap table的用法及如何使用了,所以下面的名稱就不介紹了
•realTime_Table是表的id
$("#realTime_Table").bootstrapTable({ //還是稍微介紹一下吧,這些注釋是額外的,要加錢 //是否顯示查找 search: false, //是否分頁 pagination: false, //每頁顯示多少條數(shù)據(jù),也就是要顯示多少行 pageSize: 15, //分頁,選擇不同數(shù)字會(huì)改變上面的pageSize pageList: [5, 10, 15, 20], //顯示列 showColumns: true, //顯示刷新按鈕 showRefresh: false, //是否可見 showToggle: true, //默認(rèn)英文,設(shè)置如下就是顯示中文 locale: "zh-CN", //顯示時(shí)background-color白灰相間 striped: true, /* * * * * *下面才是本文要介紹的,其他都是額外的,包括這句話 * * * * */ //======================================================================================= //雙擊觸發(fā)的事件,當(dāng)雙擊就會(huì)獲取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是個(gè)數(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; //如果此行中有玩家名字(此處默認(rèn)名字不重復(fù))與你想獲取的相同,則跳出循環(huán),indexTemp是你要的行索引 if(allTableData[i].playerName == playerNameTemp) { break; } } console.log("玩家張小帥的數(shù)據(jù)在表的第" + (indexTemp + 1) + "行"); });
題外:關(guān)于表字段設(shè)置,可以查看:點(diǎn)擊Bootstrap-table的右側(cè)邊欄Usage跳到最下面,有兩種方法,一種是在聲明表屬性中設(shè)置,另一種是在js中設(shè)置
其他相關(guān):
•BootstrapTable實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù): //www.dbjr.com.cn/article/145535.htm
總結(jié)
以上所述是小編給大家介紹的Bootstrap Table 雙擊、單擊行獲取該行及全表內(nèi)容,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細(xì)介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JS有一定幫助,需要的可以參考一下2022-08-08淺談gulp創(chuàng)建完整的項(xiàng)目流程
本篇文章主要介紹了淺談gulp創(chuàng)建完整的項(xiàng)目流程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12詳解Typescript 內(nèi)置的模塊導(dǎo)入兼容方式
這篇文章主要介紹了詳解Typescript 內(nèi)置的模塊導(dǎo)入兼容方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05uniapp頁面?zhèn)鲄⒌娜N方式實(shí)例總結(jié)
在進(jìn)行頁面的跳轉(zhuǎn)的時(shí)候,往往需要我們將一些參數(shù)攜帶著傳遞過去這里的class樣式,下面這篇文章主要給大家介紹了關(guān)于uniapp頁面?zhèn)鲄⒌娜N方式,需要的朋友可以參考下2022-11-11JS判斷輸入字符串長度實(shí)例代碼(漢字算兩個(gè)字符,字母數(shù)字算一個(gè))
下面小編就為大家?guī)硪黄狫S判斷輸入字符串長度實(shí)例代碼(漢字算兩個(gè)字符,字母數(shù)字算一個(gè))。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08JS在onclientclick里如何控制onclick的執(zhí)行
這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關(guān)資料,需要的朋友可以參考下2016-05-05JavaScript判斷空值、NULL、undefined的方法對(duì)比
JavaScript五種原始類型(boolean、number、string、null、undefined)中的一種。在鑒別JavaScript原始類型的時(shí)候我們會(huì)用到typeof操作符。Typeof操作符可用于字符串、數(shù)字、布爾和未定義類型。2022-12-12