最近研究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;
- }
- }
- }
展示数据结果如下:
来源: http://www.jb51.net/article/120529.htm