Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié)

更新時(shí)間：2016年08月08日 10:00:26 作者：BelloWorld

這篇文章主要介紹了Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié) 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

先看Bootstrap Table應(yīng)用效果：

表格用來(lái)顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù)，數(shù)據(jù)通過(guò)AJAX從服務(wù)器加載，同時(shí)分頁(yè)功能有服務(wù)器實(shí)現(xiàn)，避免客戶端分頁(yè)，在加載大量數(shù)據(jù)時(shí)造成的用戶體驗(yàn)不好。還可以設(shè)置查詢數(shù)據(jù)的起止時(shí)間，查詢一定時(shí)間范圍的數(shù)據(jù)。在線編輯功能通過(guò)擴(kuò)展Bootstrap Table實(shí)現(xiàn)，使用X-editable實(shí)現(xiàn)。

Bootstrap Table有兩種使用方式：

1.對(duì)普通的 table 設(shè)置 data 屬性；

2.通過(guò)JavaScript 來(lái)啟用 Bootstrap Table 插件。

第一種方式很方便，但是我更傾向于第二種方法，可以做到JS和HTML的分離，并且JS代碼可以復(fù)用。

Bootstrap Table的文檔比較詳細(xì)，但是有一些具體內(nèi)容還得看示例代碼等。

先貼出前臺(tái)和后臺(tái)的實(shí)現(xiàn)代碼，再具體介紹。

前臺(tái)需要的資源文件，主要有Bootstrap3相關(guān)樣式、js以及bootstrap Table相關(guān)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" >
<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="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>

HTML代碼只需要

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

JS代碼，時(shí)間查詢相關(guān)代碼，查詢時(shí)間設(shè)置正確后，通過(guò)bootstrap Table方法refresh重新加載數(shù)據(jù)：

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

Table相關(guān)js：

$('#querylist').bootstrapTable({
  columns: [{
    field: 'MeterMeasureHistoryID',
    title: 'ID',
    sortable: true
  }, {
    field: 'Value',
    title: '值',
    editable: {
      type: 'text',
      validate: function(value) {
        if($.trim(value) == '') {
          return '測(cè)量值不能為空';
        }
      }
    }
  }, {
    field: 'Timestamp',
    title: '時(shí)間',
    editable: {
      type: 'text',
      validate: function(value) {
        if($.trim(value) == '') {
          return '時(shí)間不能為空';
        }else if(!Date.parse(value)){
          return '時(shí)間設(shè)置錯(cuò)誤';
        }
      }
    }
  },{
    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參數(shù)設(shè)置表格的所有列以及每列的參數(shù)，field對(duì)應(yīng)json返回?cái)?shù)據(jù)的鍵值以及在Bootstrap Table中的列參數(shù)；title對(duì)應(yīng)顯示的列名稱；sortable設(shè)置按著當(dāng)前列排序；formatter設(shè)置列中每個(gè)單元格格式；editable設(shè)置當(dāng)前列單元格的編輯方式，還可以設(shè)置validate驗(yàn)證方式。

因此實(shí)際表格設(shè)置為四列，依據(jù)第1列排序，2、3列是可以編輯的，type設(shè)置為text，可以根據(jù)需要使用其他的type，第2列驗(yàn)證數(shù)據(jù)不能為空，第3列驗(yàn)證輸入值是時(shí)間；1、2、3列的內(nèi)容來(lái)自服務(wù)器返回的json數(shù)據(jù)；第4列是對(duì)當(dāng)前行的數(shù)據(jù)操作，并且加入監(jiān)聽(tīng)事件operateEvents，綁定到window上。

sortName設(shè)置為第1列field值；

sortOrder設(shè)置為逆序；

pagination為true表示分頁(yè)；

sidePagination為server表示服務(wù)器分頁(yè)；

pageNumber表示默認(rèn)起始頁(yè)；

pageSize表示每頁(yè)顯示數(shù)據(jù)個(gè)數(shù)；

pageList表示可選的每頁(yè)顯示數(shù)據(jù)個(gè)數(shù)；

queryParams表示每次發(fā)送給服務(wù)器的參數(shù)，可以添加自己需要的參數(shù)；

url是數(shù)據(jù)的請(qǐng)求地址。

查看bootstrap-table.js，可以看到默認(rèn)params參數(shù)：

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);
      }
    }

服務(wù)器后臺(tái)實(shí)現(xiàn)三個(gè)功能，一個(gè)是根據(jù)數(shù)據(jù)加載，以及數(shù)據(jù)修改和刪除。

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 條數(shù)據(jù)
  if ("asc" == order)
  {
    historyDatas = db.MeterMeasureHistories.
    Where(p => p.MeterMeasure.MeterID == meterID).
    OrderBy(p => p.Timestamp).
    Skip(displayStart).
    Take(displayLength).ToList();//顯示最早的 displayLength 條數(shù)據(jù)
  }
  int historyDataTotal = db.MeterMeasureHistories.
    Where(p => p.MeterMeasure.MeterID == meterID).Count();//數(shù)據(jù)總條數(shù)
  //時(shí)間過(guò)濾
  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 條數(shù)據(jù)
    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 條數(shù)據(jù)
    }
    historyDataTotal = db.MeterMeasureHistories.
      Where(p => p.MeterMeasure.MeterID == meterID).
      Where(p => p.Timestamp > begintime && p.Timestamp < endtime).Count();//數(shù)據(jù)總條數(shù)
  }
  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);
}

其中實(shí)現(xiàn)了分頁(yè)以及數(shù)據(jù)查詢，返回json數(shù)據(jù)，返回的json數(shù)據(jù)包括total、rows兩個(gè)對(duì)象，total表示數(shù)據(jù)總數(shù)，rows表示需要顯示的數(shù)據(jù)。MeterMeasureHistoryDateView如下，對(duì)應(yīng)Table中的field值：

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

數(shù)據(jù)修改函數(shù)：

[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;
}

數(shù)據(jù)刪除函數(shù)：

[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;
}

服務(wù)器刪除后，前臺(tái)通過(guò)bootstrap Table方法remove刪除指定數(shù)據(jù)行。

目前就使用了這些，總結(jié)下學(xué)習(xí)過(guò)程，就是查官方文檔、示例，看源碼，并學(xué)會(huì)使用Chrome開(kāi)發(fā)者工具，查看Sources和Network。

以上所述是小編給大家介紹的Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: