Bootstrap table

Bootstrap table學習

1、在頁面中引入相關文件。

Jquery.js

bootstrap.js  bootstrap.css

Bootstrap-table.js  bootstrap-table.css

2、編寫頁面

1．準備一個空表格

<div>

<table  id=」table」></table>

</div>

2．編寫js

$('#table').bootstrapTable({

            url: '/Home/GetDepartment',         //請求後臺的URL（*）

            method: 'get',                      //請求方式（*）

            toolbar: '#toolbar',                //工具按鈕用哪一個容器

            striped: true,                      //是否顯示行間隔色

            cache: false,                       //是否使用緩存，默認爲true，因此通常狀況

//須要設置一下這個屬性（*）

            pagination: true,                   //是否顯示分頁（*）

            sortable: false,                     //是否啓用排序

            sortOrder: "asc",                   //排序方式

            queryParams: function (params) { // 請求服務器數據時發送的參數，能夠在這裏添加額外的  // 查詢參數，返回false則終止請求

            return {

              pageSize: params.limit, // 每頁要顯示的數據條數

              offset: params.offset, // 每頁顯示數據的開始行號

              sort: params.sort, // 要排序的字段

              sortOrder: params.order, // 排序規則

              dataId: $("#dataId").val() // 額外添加的參數

          }

            sidePagination: "server",           //分頁方式：client客戶端分頁，

server服務端分頁（*）

            pageNumber:1,                       //初始化加載第一頁，默認第一頁

            pageSize: 10,                       //每頁的記錄行數（*）

            pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）

            search: true,                       //是否顯示錶格搜索

            strictSearch: true,

            showColumns: true,                  //是否顯示全部的列

            showRefresh: true,                  //是否顯示刷新按鈕

            minimumCountColumns: 2,             //最少容許的列數

            clickToSelect: true,                //是否啓用點擊選中行

            height: 500,                        //行高，若是沒有設置height屬性，

//表格自動根據記錄條數以爲表格高度

            uniqueId: "ID",                     //每一行的惟一標識，通常爲主鍵列

            showToggle:true,                    //是否顯示詳細視圖和列表視圖的切換按鈕

            cardView: false,                    //是否顯示詳細視圖

            detailView: false,                   //是否顯示父子表           

  columns: [{

                checkbox: true

            }, {

                field: 'Name',

                title: '部門名稱'

            }, {

                field: 'ParentName',

                title: '上級部門'

            }, {

                field: 'Level',

                title: '部門級別'

            }, {

                field: 'Desc',

                title: '描述'

            },{

              title: "操做",

              align: 'center',

              valign: 'middle',

              width: 160, // 定義列的寬度，單位爲像素px

              formatter: function (value, row, index) {

                  return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">刪除</button>';

              }

            },

  onLoadSuccess: function(){  //加載成功時執行

             console.info("加載成功");           

},

          onLoadError: function(){  

//加載失敗時執行

console.info("加載數據失敗");

}]

        });

 

3、表格參數

$("#table").bootstrapTable({

method: "post",

url: "獲取後臺數據的url",

... ... 

});

 

 

4、列參數

$("#table").bootstrapTable({

      method: "post",

      url: "獲取後臺數據的url",

      columns: [

          {

              checkbox: true

          }, {

              title: '標準編號'

              field: 'stdCode'

          },

          ... ...

      ]

});      

 

 

5、事件

$("#table").bootstrapTable({

      method: "post",

      url: "獲取後臺數據的url",

      onLoadSuccess: function(){  //加載成功時執行

            console.info("加載成功");

      },

      onLoadError: function(){  //加載失敗時執行

            console.info("加載數據失敗");

      }

});    

Option 事件	jQuery 事件	參數	描述
onLoadSuccess	load-success.bs.table	data	請求加載遠程服務器數據成功時的事件
onLoadError	load-error.bs.table	status	請求加載遠程服務器數據失敗時的事件
onClickRow	click-row.bs.table
onDblClickRow	dbl-click-row.bs.table	row, $element	當用戶雙擊某一行的時候觸發，參數包括： row：點擊行的數據， field：點擊列的 field 名稱。
onClickCell	click-cell.bs.table
onDblClickCell	dbl-click-cell.bs.table

6、方法

使用方法的語法：$(‘#table’).bootstrapTable(‘method’, parameter);。 

示例：

// 獲取表格全部已經勾選的行數據，爲一個對象數組

var selects = $('#table').bootstrapTable('getSelections');

名稱(method)	參數	描述
getOptions	none	返回表格的 Options。
getSelections	none	返回所選的行，當沒有選擇任何行的時候返回一個空數組。
getAllSelections	none	返回全部選擇的行，包括搜索過濾前的，當沒有選擇任何行的時候返回一個空數組。
load	data	加載數據到表格中，舊數據會被替換。
append	data	添加數據到表格在現有數據以後。
prepend	data	插入數據到表格在現有數據以前。
insertRow	params	插入新行，參數包括：index: 要插入的行的 index。 row: 行的數據，Object 對象。
refresh	params	更新遠程服務器上的數據，能夠設置{silent: true}來默認刷新，也能夠設置{url: newUrl}來改變獲取數據的url接口，也支持設置請求的參數{query: {foo: ‘bar’}}，這點在表單查詢時頗有用
showLoading	none	顯示數據加載狀態
hideLoading	none	隱藏數據加載狀態
check	index	選擇一行，參數爲行號，index從0開始
uncheck	index	取消選擇一行，參數爲行號，index從0開始
destroy	none	銷燬一個表格，直接把整個table刪掉，須要從新開始渲染table
selectPage	page	跳到指定的頁。