bootstrap Table插件使用demo

发布时间：2020-12-18 00:35:25 所属栏目：安全来源：网络整理

导读：最近研究bootstrap，它仅提供视觉效果，对于数据列表之类的并未涉及，网上找了一下，找到一个Table插件。名为bootstrapTable。官方地址：http://bootstrap-table.wenzhixin.net.cn/examples/ github:https://github.com/wenzhixin/bootstrap-table 因为英

									JS: $(function () { $("#dataShow").bootstrapTable({ url: "TradHandler.ashx?request=getTradList",sortName: "rkey",//排序列 striped: true,//條紋行 sidePagination: "server",//服务器分页 //showRefresh: true,//刷新功能 //search: true,//搜索功能 clickToSelect: true,//选择行即选择checkbox singleSelect: true,//仅允许单选 //searchOnEnterKey: true,//ENTER键搜索 pagination: true,//启用分页 escape: true,//过滤危险字符 queryParams: getParams,//携带参数 pageCount: 10,//每页行数 pageIndex: 0,//其实页 method: "get",//请求格式 //toolbar: "#toolBar",onPageChange: function (number,size) { currPageIndex = number; currLimit = size },onLoadSuccess: function () { $("#searchBtn").button('reset'); } }); //搜索 $("#searchBtn").click(function () { $(this).button('loading'); var nullparamss = {}; $("#dataShow").bootstrapTable("refresh",nullparamss); }); //enter键搜索 $("#searchKey").keydown(function (event) { if (event.keyCode == 13) { $("#searchBtn").click(); } }); //阻止enter键提交表单 $("#mainForm").submit(function () { return false; }); }); //默认加载时携带参数 function getParams(params) { var searchKey = $("#searchKey").val(); return { bysex: 1,limit: params.limit,offset: params.offset,search: searchKey }; } TradHandler.ashx： /// 获取批量数据示例 /// /// private void getTradList(HttpContext context) { //用于序列化实体类的对象 JavaScriptSerializer jss = new JavaScriptSerializer(); #region 模拟数据获取 List<SimpleModel> list = new List<SimpleModel>(); for (int i = 0; i < 1000; i++) { list.Add(new SimpleModel() { age = 18,name = "小李" + i,rkey = i + 1,sex = "男" }); } //请求中携带的条件 string bysex = context.Request.Params["bysex"]; string searchKey = context.Request.Params["search"]; //請求中攜帶的頁數和下標 int dataIndex = Convert.ToInt32(context.Request.Params["offset"]); int pageCount = Convert.ToInt32(context.Request.Params["limit"]); //查询满足条件的数据 List<SimpleModel> getList; if (bysex != null && searchKey != null) { getList = (from p in list where p.sex == (bysex == "0" ? "女" : "男") && p.name.Contains(searchKey.Trim()) select p).ToList(); } else { getList = list; } #endregion //将结果增加一列序号列 Dictionary<int,SimpleModel> testModel = new Dictionary<int,SimpleModel>(); for (int i=0;i< getList.Count;i++) { testModel.Add(i + 1,getList[i]); } //给分页实体赋值 PageModels<SimpleModel> model = new PageModels<SimpleModel>(); model.total = getList.Count; if (getList.Count % pageCount == 0) model.page = getList.Count / pageCount; else model.page = (getList.Count / pageCount) + 1; //獲取對應頁的數據 model.rows = testModel.Where(t => t.Key > dataIndex && t.Key <= dataIndex + pageCount).Select(t => t.Value).ToList(); //将查询结果返回 context.Response.Write(jss.Serialize(model)); } 有同学问pagemodel实体类，这里也分享一下，泛型实体类，因为该插件需要这些属性才能正常自动绑定 { /// /// 總行數 /// public long total { get; set; } `/// <summary> /// 总页数 /// </summary> public int page { get; set; } private List<T> _rows; /// <summary> /// 數據源 /// </summary> public List<T> rows { get { if (_rows == null) _rows = new List<T>(); return _rows; } set { _rows = value; } }` } 展示数据结果如下：以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。（编辑：李大同）【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
最近研究bootstrap，它仅提供视觉效果，对于数据列表之类的并未涉及，网上找了一下，找到一个Table插件。名为bootstrapTable。官方地址：http://bootstrap-table.wenzhixin.net.cn/examples/ github:https://github.com/wenzhixin/bootstrap-table 因为英文差，研究了半天，做了一个demo，将就看 HTML:

最近研究bootstrap，它仅提供视觉效果，对于数据列表之类的并未涉及，网上找了一下，找到一个Table插件。

名为bootstrapTable。

官方地址：http://bootstrap-table.wenzhixin.net.cn/examples/

github:https://github.com/wenzhixin/bootstrap-table

因为英文差，研究了半天，做了一个demo，将就看

HTML:

JS:

$(function () { 
  $("#dataShow").bootstrapTable({ 
    url: "TradHandler.ashx?request=getTradList",sortName: "rkey",//排序列 
    striped: true,//條紋行 
    sidePagination: "server",//服务器分页 
    //showRefresh: true,//刷新功能 
    //search: true,//搜索功能 
    clickToSelect: true,//选择行即选择checkbox 
    singleSelect: true,//仅允许单选 
    //searchOnEnterKey: true,//ENTER键搜索 
    pagination: true,//启用分页 
    escape: true,//过滤危险字符 
    queryParams: getParams,//携带参数 
    pageCount: 10,//每页行数 
    pageIndex: 0,//其实页 
    method: "get",//请求格式 
    //toolbar: "#toolBar",onPageChange: function (number,size) { 
      currPageIndex = number; 
      currLimit = size 
    },onLoadSuccess: function () 
    { 
      $("#searchBtn").button('reset'); 
    } 
  }); 

  //搜索 
  $("#searchBtn").click(function () { 
    $(this).button('loading'); 
    var nullparamss = {}; 
    $("#dataShow").bootstrapTable("refresh",nullparamss); 

  }); 
  //enter键搜索 
  $("#searchKey").keydown(function (event) { 
    if (event.keyCode == 13) 
    { 
      $("#searchBtn").click(); 
    } 
  }); 
  //阻止enter键提交表单 
  $("#mainForm").submit(function () { 
    return false; 
  }); 


}); 
//默认加载时携带参数 
function getParams(params) { 
  var searchKey = $("#searchKey").val(); 
  return { bysex: 1,limit: params.limit,offset: params.offset,search: searchKey }; 
}

TradHandler.ashx：

/// 获取批量数据示例 /// /// private void getTradList(HttpContext context) { //用于序列化实体类的对象 JavaScriptSerializer jss = new JavaScriptSerializer();

  #region 模拟数据获取 
  List<SimpleModel> list = new List<SimpleModel>(); 
  for (int i = 0; i < 1000; i++) 
  { 
    list.Add(new SimpleModel() { age = 18,name = "小李" + i,rkey = i + 1,sex = "男" }); 
  } 


  //请求中携带的条件 
  string bysex = context.Request.Params["bysex"]; 
  string searchKey = context.Request.Params["search"]; 

  //請求中攜帶的頁數和下標 
  int dataIndex = Convert.ToInt32(context.Request.Params["offset"]); 
  int pageCount = Convert.ToInt32(context.Request.Params["limit"]); 

  //查询满足条件的数据 
  List<SimpleModel> getList; 
  if (bysex != null && searchKey != null) 
  { 
    getList = (from p in list 
          where p.sex == (bysex == "0" ? "女" : "男") && p.name.Contains(searchKey.Trim()) 
          select p).ToList(); 
  } 
  else 
  { 
    getList = list; 
  } 
  #endregion 

  //将结果增加一列序号列 
  Dictionary<int,SimpleModel> testModel = new Dictionary<int,SimpleModel>(); 
  for (int i=0;i< getList.Count;i++) 
  { 
    testModel.Add(i + 1,getList[i]); 
  } 

  //给分页实体赋值 
  PageModels<SimpleModel> model = new PageModels<SimpleModel>(); 
  model.total = getList.Count; 
  if (getList.Count % pageCount == 0) 
    model.page = getList.Count / pageCount; 
  else 
    model.page = (getList.Count / pageCount) + 1; 

  //獲取對應頁的數據 
  model.rows = testModel.Where(t => t.Key > dataIndex && t.Key <= dataIndex + pageCount).Select(t => t.Value).ToList(); 

  //将查询结果返回 
  context.Response.Write(jss.Serialize(model)); 
}

有同学问pagemodel实体类，这里也分享一下，泛型实体类，因为该插件需要这些属性才能正常自动绑定

{ ///

/// 總行數 ///

public long total { get; set; }

/// <summary> 
/// 总页数 
/// </summary> 
public int page { get; set; } 

private List<T> _rows; 
/// <summary> 
/// 數據源 
/// </summary> 
public List<T> rows 
{ 
  get 
  { 
    if (_rows == null) 
      _rows = new List<T>(); 
    return _rows; 
  } 
  set 
  { 
    _rows = value; 
  } 
}

}

展示数据结果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!