Bootstrap Table伺服器分頁與線上編輯應用總結，bootstraptable

Bootstrap Table伺服器分頁與線上編輯應用總結，bootstraptable

先看Bootstrap Table應用效果：

 表格用來顯示資料庫中的資料，資料通過AJAX從伺服器載入，同時分頁功能有伺服器實現，避免用戶端分頁，在載入大量資料時造成的使用者體驗不好。還可以設定查詢資料的起止時間，查詢一定時間範圍的資料。線上編輯功能通過擴充Bootstrap Table實現，使用X-editable實現。

Bootstrap Table有兩種使用方式：

 1.對普通的 table 設定 data 屬性；

 2.通過JavaScript 來啟用 Bootstrap Table 外掛程式。

第一種方式很方便，但是我更傾向於第二種方法，可以做到JS和HTML的分離，並且JS代碼可以複用。

Bootstrap Table的文檔比較詳細，但是有一些具體內容還得看範例程式碼等。

先貼出前台和背景實現代碼，再具體介紹。

前台需要的資源檔，主要有Bootstrap3相關樣式、js以及bootstrap Table相關css、js以及X-editable基於Bootstrap3的樣式、js：

<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css"><link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"><script src="../assets/jquery.min.js"></script><script src="../assets/bootstrap/js/bootstrap.min.js"></script><script src="../assets/bootstrap-table/src/bootstrap-table.js"></script><script src="../assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script><script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>

HTML代碼只需要

 <table id="querylist" class="table table-striped"></table> 

JS代碼，時間查詢相關代碼，查詢時間設定正確後，通過bootstrap Table方法refresh重新載入資料：

$('#submitgetdata').click(function () {  $('#msg').html('');  var begintime_ = $('#begintime').val();  var endtime_ = $('#endtime').val();  var err = '';  if (begintime_ == '' || endtime_ == ''){    err = '查詢時間不可為空';  }else if(Date.parse(endtime_)-Date.parse(begintime_) < 0){    err = '查詢時間設定錯誤';  }  if (err) {    $('#msg').html(err + '!');    $('#msg').fadeIn(1000);  }  else {    $('#msg').html("正在提交!");    $('#querylist').bootstrapTable('refresh');    $('#msg').fadeOut(3000);  }});

Table相關js：

$('#querylist').bootstrapTable({  columns: [{    field: 'MeterMeasureHistoryID',    title: 'ID',    sortable: true  }, {    field: 'Value',    title: '值',    editable: {      type: 'text',      validate: function(value) {        if($.trim(value) == '') {          return '測量值不可為空';        }      }    }  }, {    field: 'Timestamp',    title: '時間',    editable: {      type: 'text',      validate: function(value) {        if($.trim(value) == '') {          return '時間不可為空';        }else if(!Date.parse(value)){          return '時間設定錯誤';        }      }    }  },{    field: 'operation',    title: '操作',    formatter:function(value,row,index){      var s = '<a class = "save" href="javascript:void(0)">儲存</a>';      var d = '<a class = "remove" href="javascript:void(0)">刪除</a>';      return s+' '+d;    },    events: 'operateEvents'  }],  sortName: 'MeterMeasureHistoryID',  sortOrder: 'desc',  pagination: true,  sidePagination: 'server',  pageNumber: 1,  pageSize: 5,  pageList: [5, 10, 20],  queryParams: function (params) {    return {      meterID: $('#meterid').val(),      pageSize: params.limit,      offset: params.offset,      sortOrder: params.order,      begintime: $('#begintime').val(),      endtime: $('#endtime').val()    }  },  url: '/Analyze/GetJsonHistoryDatas'});window.operateEvents = {  'click .save': function (e, value, row, index) {    $.ajax({      type: "post",      data: row,      url: '/Analyze/EditMeterMeasureHistoryData',      success: function (data) {        alert('修改成功');      }    });  },  'click .remove': function (e, value, row, index) {    $.ajax({      type: "post",      data: row,      url: '/Analyze/DeleteMeterMeasureHistoryData',      success: function (data) {        alert('刪除成功');        $('#querylist').bootstrapTable('remove', {          field: 'MeterMeasureHistoryID',          values: [row.MeterMeasureHistoryID]        });      }    });  }};

columns參數設定表格的所有列以及每列的參數，field對應json返回資料的索引值以及在Bootstrap Table中的列參數；title對應顯示的列名稱；sortable設定按著當前列排序；formatter設定列中每個儲存格格式；editable設定當前列儲存格的編輯方式，還可以設定validate驗證方式。

因此實際表格設定為四列，依據第1列排序，2、3列是可以編輯的，type設定為text，可以根據需要使用其他的type，第2列驗證資料不可為空，第3列驗證輸入值是時間；1、2、3列的內容來自伺服器返回的json資料；第4列是對當前行的資料操作，並且加入監聽事件operateEvents，綁定到window上。

sortName設定為第1列field值；

sortOrder設定為逆序；

pagination為true表示分頁；

sidePagination為server表示伺服器分頁；

pageNumber表示預設起始頁；

pageSize表示每頁顯示資料個數；

pageList表示可選的每頁顯示資料個數；

queryParams表示每次發送給伺服器的參數，可以添加自己需要的參數；

url是資料的請求地址。

查看bootstrap-table.js，可以看到預設params參數：

BootstrapTable.prototype.initServer = function (silent, query) {    var that = this,      data = {},      params = {        pageSize: this.options.pageSize === this.options.formatAllRows() ? this.options.totalRows : this.options.pageSize,        pageNumber: this.options.pageNumber,        searchText: this.searchText,        sortName: this.options.sortName,        sortOrder: this.options.sortOrder      };    if (!this.options.url) {      return;    }    if (this.options.queryParamsType === 'limit') {      params = {        search: params.searchText,        sort: params.sortName,        order: params.sortOrder      };      if (this.options.pagination) {        params.limit = this.options.pageSize === this.options.formatAllRows() ?          this.options.totalRows : this.options.pageSize;        params.offset = this.options.pageSize === this.options.formatAllRows() ?: this.options.pageSize * (this.options.pageNumber - 1);      }    }

伺服器後台實現三個功能，一個是根據資料載入，以及資料修改和刪除。

public ActionResult GetJsonHistoryDatas(){  var displayStart = int.Parse(Request["offset"]);  var displayLength = int.Parse(Request["pageSize"]);  var meterID = int.Parse(Request["MeterID"]);  var order = Request["sortOrder"];  var historyDatas = db.MeterMeasureHistories.    Where(p => p.MeterMeasure.MeterID == meterID).    OrderByDescending(p => p.Timestamp).    Skip(displayStart).    Take(displayLength).ToList();//顯示最近的 displayLength 條資料  if ("asc" == order)  {    historyDatas = db.MeterMeasureHistories.    Where(p => p.MeterMeasure.MeterID == meterID).    OrderBy(p => p.Timestamp).    Skip(displayStart).    Take(displayLength).ToList();//顯示最早的 displayLength 條資料  }  int historyDataTotal = db.MeterMeasureHistories.    Where(p => p.MeterMeasure.MeterID == meterID).Count();//資料總條數  //時間過濾  if (!String.IsNullOrEmpty(Request["begintime"]))  {    DateTime begintime = DateTime.Parse(Request["begintime"]);    DateTime endtime = DateTime.Parse(Request["endtime"]);    historyDatas = db.MeterMeasureHistories.      Where(p => p.MeterMeasure.MeterID == meterID).      Where(p => p.Timestamp > begintime && p.Timestamp < endtime).      OrderByDescending(p => p.Timestamp).      Skip(displayStart).      Take(displayLength).ToList();//顯示最近的 displayLength 條資料    if ("asc" == order)    {      historyDatas = db.MeterMeasureHistories.      Where(p => p.MeterMeasure.MeterID == meterID).      Where(p => p.Timestamp > begintime && p.Timestamp < endtime).      OrderBy(p => p.Timestamp).      Skip(displayStart).      Take(displayLength).ToList();//顯示最早的 displayLength 條資料    }    historyDataTotal = db.MeterMeasureHistories.      Where(p => p.MeterMeasure.MeterID == meterID).      Where(p => p.Timestamp > begintime && p.Timestamp < endtime).Count();//資料總條數  }  List<MeterMeasureHistoryDataViewModels> ListMeterMeasureHistories = new List<MeterMeasureHistoryDataViewModels>();  foreach (var item in historyDatas)  {    ListMeterMeasureHistories.Add(new MeterMeasureHistoryDataViewModels    {      MeterMeasureHistoryID = item.MeterMeasureHistoryID,      Value = item.Value,      Timestamp = item.Timestamp.ToString()    });  }  string jsonDataTable = JsonConvert.SerializeObject(    new    {      total = historyDataTotal,      rows = ListMeterMeasureHistories    });  return Content(jsonDataTable);}

其中實現了分頁以及資料查詢，返回json資料，返回的json資料包括total、rows兩個對象，total表示資料總數，rows表示需要顯示的資料。MeterMeasureHistoryDateView如下，對應Table中的field值：

public class MeterMeasureHistoryDataViewModels{  public int MeterMeasureHistoryID { get; set; }  public double Value { get; set; }  public string Timestamp { get; set; }}

資料修改函數：

[HttpPost]public JsonResult EditMeterMeasureHistoryData(){  var metermeasurehistoryid = int.Parse(Request["MeterMeasureHistoryID"]);  var metermeasurehistoryvalue = double.Parse(Request["Value"]);  var metermeasurehistorytime = DateTime.Parse(Request["Timestamp"]);  var metermeasurehistoryInDb = db.MeterMeasureHistories.Find(metermeasurehistoryid);  metermeasurehistoryInDb.Value = metermeasurehistoryvalue;  metermeasurehistoryInDb.Timestamp = metermeasurehistorytime;  db.SaveChanges();  var changedData = new MeterMeasureHistoryDataViewModels    {      MeterMeasureHistoryID = metermeasurehistoryInDb.MeterMeasureHistoryID,      Value = metermeasurehistoryInDb.Value,      Timestamp = metermeasurehistoryInDb.Timestamp.ToString()    };  JsonResult js = new JsonResult();  js.Data = Json(changedData);  return js;}

資料刪除函數：

[HttpPost]public JsonResult DeleteMeterMeasureHistoryData(){  var metermeasurehistoryid = int.Parse(Request["MeterMeasureHistoryID"]);  db.MeterMeasureHistories.Remove(db.MeterMeasureHistories.Find(metermeasurehistoryid));  db.SaveChanges();  var deletedData = new MeterMeasureHistoryDataViewModels  {    MeterMeasureHistoryID = metermeasurehistoryid,    Value = 0,    Timestamp = null  };  JsonResult js = new JsonResult();  js.Data = deletedData;  return js;}

伺服器刪除後，前台通過bootstrap Table方法remove刪除指定資料行。

目前就使用了這些，總結下學習過程，就是查官方文檔、樣本，看源碼，並學會使用Chrome開發人員工具，查看Sources和Network。

以上所述是小編給大家介紹的Bootstrap Table伺服器分頁與線上編輯應用總結，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！