bootstrap样式

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

名为bootstrapTable。

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

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

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

HTML: 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/// <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实体类，这里也分享一下，泛型实体类，因为该插件需要这些属性才能正常自动绑定

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
[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;
      }
    }
  }

展示数据结果如下：

 

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

posted @ 2021-03-03 15:07  厦门哈韩  阅读(90)  评论(0)  编辑  收藏  举报