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>

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

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

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

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

展示数据结果如下：

 

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