什么叫微信小程序_bootstrap Table插件使用demo

bootstrap Table插件使用demo       本篇文章主要介绍了bootstrap Table插件使用demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

名为bootstrapTable。

github:

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

HTML: 

 table id="dataShow" 
 thead 
 th data-checkbox="true" 选择 /th 
 th data-field="rkey" 供应商名称 /th 
 th data-field="rkey" 供应商编码 /th 
 th data-field="name" 物料编码 /th 
 th data-field="sex" 申请类型 /th 
 th data-field="birthdayString" 试用申请编码 /th 
 th data-field="age" 试用状态 /th 
 th data-field="age" 厂别 /th 
 th data-field="age" 审批状态 /th 
 th data-field="birthday" 申请时间 /th 
 th data-field="age" 试用结果 /th 
 /tr 
 /thead 
 /table 

JS:

var currPageIndex = 0; 
 var currLimit = 10; 
 $(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 
 ess: 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; 
 }); 

 var searchKey = $("#searchKey").val(); 
 return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey }; 

TradHandler.ashx：

/// summary 
 /// 获取批量数据示例 
 /// /summary 
 /// param name="context" /param 
 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实体类，这里也分享一下，泛型实体类，因为该插件需要这些属性才能正常自动绑定

[Serializable] 
 public class TablePageModel T 
 /// summary 
 /// 總行數 
 /// /summary 
 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; 

展示数据结果如下：

 

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