什么是Bootstrap-table？

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

在業(yè)務(wù)系統(tǒng)開(kāi)發(fā)中，對(duì)表格記錄的查詢、分頁(yè)、排序等處理是非常常見(jiàn)的，在Web開(kāi)發(fā)中，可以采用很多功能強(qiáng)大的插件來(lái)滿足要求，且能極大的提高開(kāi)發(fā)效率，本隨筆介紹這個(gè)bootstrap-table是一款非常有名的開(kāi)源表格插件，在很多項(xiàng)目中廣泛的應(yīng)用。Bootstrap-table插件提供了非常豐富的屬性設(shè)置，可以實(shí)現(xiàn)查詢、分頁(yè)、排序、復(fù)選框、設(shè)置顯示列、Card view視圖、主從表顯示、合并列、國(guó)際化處理等處理功能，而且該插件同時(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)使用中碰到的問(wèn)題處理經(jīng)驗(yàn)。

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

說(shuō)明：看到這個(gè)應(yīng)該就知道了bootstrap table的用法及如何使用了，所以下面的名稱就不介紹了

•realTime_Table是表的id

$("#realTime_Table").bootstrapTable({
  //還是稍微介紹一下吧，這些注釋是額外的，要加錢
  //是否顯示查找
  search: false,
  //是否分頁(yè)
  pagination: false,
  //每頁(yè)顯示多少條數(shù)據(jù)，也就是要顯示多少行
  pageSize: 15,
  //分頁(yè)，選擇不同數(shù)字會(huì)改變上面的pageSize
  pageList: [5, 10, 15, 20],
  //顯示列
  showColumns: true,
  //顯示刷新按鈕
  showRefresh: false,
  //是否可見(jiàn)
  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定義的字段,）可以通過(guò)該方法獲取該行所有列的值
  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.jb51.net/article/145535.htm

總結(jié)

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

當(dāng)前標(biāo)題：BootstrapTable雙擊、單擊行獲取該行及全表內(nèi)容
轉(zhuǎn)載源于：http://aaarwkj.com/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)站維護(hù)

廣告

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