最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

bootstrap Table插件使用demo

来源:懂视网 责编:小采 时间:2020-11-27 22:33:18
文档

bootstrap Table插件使用demo

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

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

名为bootstrapTable。

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

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

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

HTML: 

<table class="table" id="dataShow" > 
 <thead> 
 <tr> 
 <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 
 }, 
 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:

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

展示数据结果如下:

 

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

bootstrap Table插件使用demo

bootstrap Table插件使用demo:最近研究bootstrap,它仅提供视觉效果,对于数据列表之类的并未涉及,网上找了一下,找到一个Table插件。 名为bootstrapTable。 官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/ github:https://github.
推荐度:
标签: 表格 使用 插件
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top