bootstrap Table插件demo

最近研究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;
            }
        }
    }

展示数据结果如下：