腳本之家服務(wù)器常用軟件

快捷導航

bootstrap table表格使用方法詳解

更新時間：2017年04月26日 08:46:54 作者：sj2016

這篇文章主要為大家詳細介紹了bootstrap table表格使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了bootstrap table表格的使用方法，供大家參考，具體內(nèi)容如下

1.進入頁面，根據(jù)指定的URL加載數(shù)據(jù)(json格式)

2.加載成功，根據(jù)$table.bootstrapTable({options})顯示表格樣式。

感覺還是挺漂亮的哈，OK，下面貼代碼解釋功能。

開始之前，當然要引用js啦

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>

html代碼，一是指定table要使用的工具欄，而是寫一個空的table

<div class="row">
 <div class="col-md-12">
   <div class="btn-group" id="toobar" role="group" aria-label="...">
    <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-plus"></span>新增
      </button>
      <button type="button" class="btn btn-default">
       <span class="glyphicon glyphicon-edit"></span>修改
      </button>
      <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-remove"></span>刪除
      </button>
    </div>
   <table id="myTable"></table>
 </div>
 </div>

js代碼，使用("#table").bootstraptable({options})填充table

$("#myTable").bootstrapTable({
      url: '/BootstrapTable/GetTestData',
      method: 'get',
      toolbar: '#toobar',//工具列
      striped: true,//隔行換色
      cache: false,//禁用緩存
      pagination: true,//啟動分頁
      sidePagination: 'client',//分頁方式
      pageNumber: 1,//初始化table時顯示的頁碼
      pageSize: 10,//每頁條目
      showFooter: false,//是否顯示列腳
      showPaginationSwitch: true,//是否顯示 數(shù)據(jù)條數(shù)選擇框
      sortable: false,//排序
      search: true,//啟用搜索
      showColumns: true,//是否顯示 內(nèi)容列下拉框
      showRefresh: true,//顯示刷新按鈕
      idField: 'SystemCode',//key值欄位
      clickToSelect: true,//點擊選中checkbox
      singleSelect: true,//啟用單行選中
      columns: [{
      checkbox: true
      },
     {
       field: 'SystemCode',
       title: '系統(tǒng)代碼',
       titleTooltip: 'young for you'
      },
      {
       field: 'SystemDesc',
       title: '系統(tǒng)名稱'
     },
     {
       field: 'Isvalid',
       title: '是否有效'
      },
      {
       field: 'UUser',
       title: '更新人'
      },
      {
       field: 'UDate',
       title: '更新時間'
      }],
      onClickCell: function (field, value, row, $element) {
      //alert(row.SystemDesc);
    }
   });

其中URL是table 數(shù)據(jù)源地址，如果table啟動了分頁功能，后臺取數(shù)據(jù)的方法要加上limit、offset兩個int類型的參數(shù)，這里把后臺代碼也貼一下。

public JsonResult GetTestData(int limit, int offset)
   {
    BugzillaModelContainer db = new BugzillaModelContainer();
    List<B_SystemInfo> systemInfo = db.B_SystemInfo.ToList();
    for (int i = 0; i < 20; i++)
    {
     B_SystemInfo tempSystem = new B_SystemInfo();
     tempSystem.SystemCode = (i + 1).ToString();
     tempSystem.SystemDesc = "測試系統(tǒng)" + (i + 1).ToString();
     tempSystem.Isvalid = "Y";
     tempSystem.UUser = "result_for" + (i + 1).ToString();
     tempSystem.UDate = System.DateTime.Now.ToShortDateString();
     systemInfo.Add(tempSystem);
    }
 
    var total = systemInfo.Count();
    var rows = systemInfo.Skip(offset).Take(limit).ToList();
    return Json(systemInfo, JsonRequestBehavior.AllowGet);
   }

offset表示從多少條數(shù)據(jù)開始取，limit表示取多少條數(shù)據(jù)。

客戶端搜索只要設(shè)置search=true即可。

服務(wù)端搜索，需要設(shè)置參數(shù)。

首先設(shè)置

("#table").bootstraptable({queryParams: oTableInit.queryParams}),//傳遞參數(shù)（*）

然后獲取查詢的參數(shù)

//得到查詢的參數(shù)
 oTableInit.queryParams = function (params) {
   var temp = { 

  //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
    limit: params.limit, //頁面大小
    offset: params.offset, //頁碼
    systemcode: $("#systemcode").val(),
    };
  return temp;
};

通過button事件刷新table，重新獲取數(shù)據(jù)源，即可。

$("#btnQuery").click(function () {
   $table.bootstrapTable('refresh');
 });

最后貼上全部html代碼~

<!DOCTYPE html>

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <link href="~/Content/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet" />
 <script src="~/Scripts/jquery-1.9.1.js"></script>
 <script src="~/Scripts/bootstrap.min.js"></script>
 <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
</head>
<body>
 <div class="container">
 <div class="row">
  <div class="col-md-8">

  </div>
 </div>
 <div class="row">
  <div class="col-md-12">
  <div class="btn-group" id="toobar" role="group" aria-label="...">
   <button type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-plus"></span>新增
   </button>
   <button type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-edit"></span>修改
   </button>
   <button type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-remove"></span>刪除
   </button>
  </div>
  <table id="myTable"></table>
  </div>
 </div>
 </div>
 <script>

 $(function () {
  var itable = TableInit();
  itable.Init();
 });

 var TableInit = function () {
  var myTableInit = new Object();

  myTableInit.Init = function () {
  $("#myTable").bootstrapTable({
   url: '/BootstrapTable/GetTestData',
   method: 'get',
   toolbar: '#toobar',//工具列
   striped: true,//隔行換色
   cache: false,//禁用緩存
   pagination: true,//啟動分頁
   sidePagination: 'client',//分頁方式
   pageNumber: 1,//初始化table時顯示的頁碼
   pageSize: 10,//每頁條目
   showFooter: false,//是否顯示列腳
   showPaginationSwitch: true,//是否顯示 數(shù)據(jù)條數(shù)選擇框
   sortable: false,//排序
   search: true,//啟用搜索
   showColumns: true,//是否顯示 內(nèi)容列下拉框
   showRefresh: true,//顯示刷新按鈕
   idField: 'SystemCode',//key值欄位
   clickToSelect: true,//點擊選中checkbox
   singleSelect: true,//啟用單行選中
   columns: [{
   checkbox: true
   },
   {
   field: 'SystemCode',
   title: '系統(tǒng)代碼',
   titleTooltip: 'young for you'
   },
   {
   field: 'SystemDesc',
   title: '系統(tǒng)名稱'
   },
   {
   field: 'Isvalid',
   title: '是否有效'
   },
   {
   field: 'UUser',
   title: '更新人'
   },
   {
   field: 'UDate',
   title: '更新時間'
   }],
   onClickCell: function (field, value, row, $element) {
   //alert(row.SystemDesc);
   }
  });
  };

  return myTableInit;
 };
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解webpack之scss和postcss-loader的配置
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
這篇文章主要介紹了微信小程序開發(fā)返回上一級頁面并刷新操作,結(jié)合實例形式詳細分析了微信小程序返回上一級頁面并刷新操作方法技巧與相關(guān)注意事項,需要的朋友可以參考下
2020-06-06

javascript 關(guān)于賦值、淺拷貝、深拷貝的個人理解

關(guān)于賦值、淺拷貝、深拷貝，以前也思考良久，很多時候都以為記住了，但是，我太難了。今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學習這個東西的同學

2019-11-11

小程序?qū)崿F(xiàn)上下切換位置

這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)上下切換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

2020-11-11

Js+XML 操作

Js+XML 操作...

2006-09-09

淺談頁面裝載js及性能分析方法

這篇文章主要簡單介紹了頁面裝載js及性能分析方法的相關(guān)資料,需要的朋友可以參考下

2014-12-12

Markdown-it將Markdown文本解析轉(zhuǎn)換為HTML

Markdown-it是一款強大的Markdown解析器,支持多種Markdown語法,并能將Markdown文本轉(zhuǎn)換為HTML,通過npm可快速安裝,并可在JavaScript項目中簡易調(diào)用,Markdown-it不僅支持基本Markdown語法,還擴展了表格、腳注等高級功能,同時允許自定義配置和使用插件以增強功能

2024-10-10