快捷導(dǎo)航

bootstrap table實(shí)例詳解

更新時(shí)間：2017年01月06日 09:08:03 作者：F_GSong

本文通過實(shí)例代碼給大家介紹了bootstrap table樣式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<script type="text/javascript">
  var $table = $('#table');
  var columns = [];
  //獲取表頭信息
  function buildColumnsStyle(url, align, valign, ignore) {
    $.ajax({
      'method': 'GET',
      'url': url,
      'async': false,
      'success': function (data, status) {
        //此處設(shè)置columns
      }
    });
  }
  buildColumnsStyle('/api/v1/ArticleItem/info', 'center', null, []);
  //動(dòng)態(tài)表格渲染
  $(function () {
    $table.bootstrapTable({
      columns: columns, //表格的列，取決于后臺(tái)獲取的數(shù)據(jù)
      pageList: [10, 20, 50], //表格每頁數(shù)據(jù)條數(shù)控制
      onClickCell: function (row, field, value, $element) {
           //單元格事件
        },
      onPageChange: function (number, size) {
          //表格頁面切換事件
        }
    });
    //搜索按鈕事件，用于bootstrap table 數(shù)據(jù)加載
    $('#searchArticle').click(function () { 
      $.get(generateSearchArticleUrl(true), function (data, status) {
        //創(chuàng)建bootstrap模態(tài)對(duì)話框
        createBootstrapModal(data.result, 100);
        createLabels(data.result);
        //數(shù)據(jù)加載
        if (data.success && data.result.length != 0) {
            $table.bootstrapTable('load', {data: data.result});
        } else {
            $table.bootstrapTable('load', {data: []});
        }
        renderLabels();
      });
    });
  });
</script>

以上所述是小編給大家介紹的bootstrap table實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)水平垂直滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)水平垂直滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
js改變透明度實(shí)現(xiàn)輪播圖的算法
這篇文章主要為大家詳細(xì)介紹了js改變透明度實(shí)現(xiàn)輪播圖的算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
uni-app中彈窗的使用與自定義彈窗
眾所周知彈窗在我們實(shí)際開發(fā)場(chǎng)景中是非常常用的,最近在工作中就遇到了相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于uni-app中彈窗使用與自定義彈窗的相關(guān)資料,需要的朋友可以參考下
2022-04-04
防止動(dòng)態(tài)加載JavaScript引起的內(nèi)存泄漏問題
利用Script標(biāo)簽可以跨域加載并運(yùn)行一段JavaScript腳本，但Neil Fraser先前已指出，腳本運(yùn)行后資源并沒被釋放，即使是Script標(biāo)簽移除后。
2009-10-10
ionic2屏幕適配實(shí)現(xiàn)適配手機(jī)、平板等設(shè)備的示例代碼
本篇文章主要介紹了ionic2屏幕適配實(shí)現(xiàn)適配手機(jī)、平板等設(shè)備的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-08-08
用JavaScript獲取頁面文檔內(nèi)容的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄肑avaScript獲取頁面文檔內(nèi)容的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
新手快速入門微信小程序組件庫 iView Weapp
這篇文章主要介紹了新手快速入門微信小程序組件庫 iView Weapp，iView Weapp 提供了與 iView 一致的 UI 和盡可能相同的接口名稱，大幅度降低了學(xué)習(xí)成本，是一套一套高質(zhì)量的微信小程序 UI 組件庫,需要的朋友可以參考下
2019-06-06
js中更短的 Array 類型轉(zhuǎn)換
代碼永遠(yuǎn)都是那么好玩，而 Trick 不斷。那天張克軍在 twitter 上說還有比 [].slice.call() 更短的 Array 轉(zhuǎn)換么
2011-10-10
ES6中的Promise.all()和Promise.race()函數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了ES6的Promise.all()和Promise.race()函數(shù),結(jié)合實(shí)例代碼介紹了ES6 Promise.race和Promise.all方法使用，通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-02-02
javascript的創(chuàng)建多行字符串的7種方法
多行字符串的作用是用來提高源代碼的可讀性.尤其是當(dāng)你處理預(yù)定義好的較長(zhǎng)字符串時(shí),把這種字符串分成多行書寫更有助于提高代碼的可讀性和可維護(hù)性.在一些語言中,多行字符串還可以用來做代碼注釋. 大部分動(dòng)態(tài)腳本語言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?
2014-04-04