BootstrapTable雙擊、單擊行獲取該行及全表內(nèi)容

什么是Bootstrap-table？

站在用戶的角度思考問題，與客戶深入溝通，找到欽州網(wǎng)站設(shè)計與欽州網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋欽州地區(qū)。

在業(yè)務(wù)系統(tǒng)開發(fā)中，對表格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發(fā)中，可以采用很多功能強大的插件來滿足要求，且能極大的提高開發(fā)效率，本隨筆介紹這個bootstrap-table是一款非常有名的開源表格插件，在很多項目中廣泛的應(yīng)用。Bootstrap-table插件提供了非常豐富的屬性設(shè)置，可以實現(xiàn)查詢、分頁、排序、復(fù)選框、設(shè)置顯示列、Card view視圖、主從表顯示、合并列、國際化處理等處理功能，而且該插件同時也提供了一些不錯的擴展功能，如移動行、移動列位置等一些特殊的功能，插件可以用基于HTML5的data-*屬性標(biāo)識設(shè)置，也可以使用Javascript方式進行設(shè)置，非常方便。本篇隨筆介紹bootstrap-table插件在我實際項目中的應(yīng)用情況，總結(jié)相關(guān)使用中碰到的問題處理經(jīng)驗。

Bootstrap Table 獲取單擊或雙擊的行內(nèi)容

說明：看到這個應(yīng)該就知道了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,
  //默認(rèn)英文，設(shè)置如下就是顯示中文
  locale: "zh-CN",
  //顯示時background-color白灰相間
  striped: true,
  /*
  *
  *
  *
  *
  *下面才是本文要介紹的，其他都是額外的，包括這句話
  *
  *
  *
  *
  */
  //=======================================================================================
  //雙擊觸發(fā)的事件，當(dāng)雙擊就會獲取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;
   //如果此行中有玩家名字（此處默認(rèn)名字不重復(fù)）與你想獲取的相同，則跳出循環(huán)，indexTemp是你要的行索引
   if(allTableData[i].playerName == playerNameTemp) {
    break;
   }
  }
  console.log("玩家張小帥的數(shù)據(jù)在表的第" + (indexTemp + 1) + "行");
 });

題外：關(guān)于表字段設(shè)置，可以查看：點擊Bootstrap-table的右側(cè)邊欄Usage跳到最下面，有兩種方法，一種是在聲明表屬性中設(shè)置，另一種是在js中設(shè)置

其他相關(guān)：

•BootstrapTable實現(xiàn)定時刷新數(shù)據(jù)： //www.jb51.net/article/145535.htm

總結(jié)

以上所述是小編給大家介紹的Bootstrap Table 雙擊、單擊行獲取該行及全表內(nèi)容，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

當(dāng)前標(biāo)題：BootstrapTable雙擊、單擊行獲取該行及全表內(nèi)容
轉(zhuǎn)載源于：http://muchs.cn/article30/iiogpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站排名、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、外貿(mào)建站、網(wǎng)站維護

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容