BootstrapTable（附源码）

Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。

引用的css：

<link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />

引用的JS：

<script src="../../Scripts/jquery.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap-table.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>

常用方法：

刷新表格：$table.bootstrapTable('refresh');

获取选择的行：$table.bootstrapTable('getSelections');

1.服务端请求：即当数据量大，千百万条数据的情况下，只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。

前端代码：

function initTable() {

            var queryUrl = '@Url.Content("~/Welcome/QueryList")' + '?rnd=' + +Math.random();

            $table = $('#table-javascript').bootstrapTable({

                //method: 'get',

　　　　　　　　　　method: 'post',
　　　　　　　　　　contentType: "application/x-www-form-urlencoded",//必须的，操你大爷！！！！

                url: queryUrl,

                height: $(window).height() - 200,

                striped: true,

                pagination: true,

                singleSelect: false,

                pageSize: 50,

                pageList: [10, 50, 100, 200, 500],

                search: false, //不显示 搜索框

                showColumns: false, //不显示下拉框（选择显示的列）

                sidePagination: "server", //服务端请求

                queryParams: queryParams,

                minimunCountColumns: 2,

                columns: [{

                    field: 'state',

                    checkbox: true

                }, {

                    field: 'Name',

                    title: '姓名',

                    width: 100,

                    align: 'center',

                    valign: 'middle',

                    sortable: true,

                    formatter: nameFormatter

                }, {

                    field: 'Gender',

                    title: '性别',

                    width: 40,

                    align: 'left',

                    valign: 'top',

                    sortable: true,

                    formatter: sexFormatter,

                    sorter: priceSorter

                }, {

                    field: 'Birthday',

                    title: '出生日期',

                    width: 80,

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'CtfId',

                    title: '身份证',

                    width: 80,

                    align: 'middle',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'Address',

                    title: '地址',

                    width: 180,

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'Tel',

                    title: '固定电话',

                    width: 100,

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'Mobile',

                    title: '手机号码',

                    width: 100,

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'operate',

                    title: '操作',

                    width: 100,

                    align: 'center',

                    valign: 'middle',

                    formatter: operateFormatter,

                    events: operateEvents

                }],

                onLoadSuccess:function(){

                },

                onLoadError: function () {

                    mif.showErrorMessageBox("数据加载失败！");

                }

            });

        }

//传递的参数

function queryParams(params) {

            return {

                pageSize: params.pageSize,

                pageIndex: params.pageNumber,

                UserName: $("#txtName").val(),

                Birthday: $("#txtBirthday").val(),

                Gender: $("#Gender").val(),

                Address: $("#txtAddress").val(),

                name: params.sortName,

                order: params.sortOrder

            };

        }

　　

服务器端代码：

public ActionResult QueryList(int pageIndex = 1, int pageSize = 100)

        {

            try

            {

                string name = Request["UserName"];

                string birthday = Request["Birthday"];

                string gender = Request["Gender"];

                string Address = Request["Address"];

                Document docQuery = new Document();

                if (!string.IsNullOrEmpty(name))

                {

                    docQuery.Add("Name", new MongoRegex(".*" + name + ".*", MongoRegexOption.IgnoreCase));

                }

                if (!string.IsNullOrEmpty(birthday))

                {

                    docQuery.Add("Birthday", new MongoRegex(".*" + birthday + ".*", MongoRegexOption.IgnoreCase));

                }

                if (!string.IsNullOrEmpty(gender))

                {

                    docQuery.Add("Gender", gender);

                }

                if (!string.IsNullOrEmpty(Address))

                {

                    docQuery.Add("Address", new MongoRegex(".*" + Address + ".*", MongoRegexOption.IgnoreCase));

                }

                if (this.HttpContext.Request.QueryString.AllKeys.Contains("ToExcel"))

                {

                    List<OpenRoom> listExport = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery);

                    //List<string> listTilte = new List<string> { "" };

                    ExportMethod(listExport);

                }

                long totalCount = MongoDbHelper.GetTotalCount<OpenRoom>(MongoTables.OpenRoom, docQuery);

                var list = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery, new Document(), pageIndex, pageSize);

                string jsonString = JsonHelper.ObjToJson(list);

                jsonString = "{\"total\":" + totalCount.ToString() + ",\"rows\":" + jsonString + "}";

                return Content(jsonString);

            }

            catch (Exception ex)

            {

                return Content(ex.Message);

            }

        }

　　

注意返回的格式：要返回总记录数total及分页后数据rows。

未解决问题：导出Excel时，超出65536行数据时，会异常。怎样解决这个问题？

2.客户端请求：当数据量较少，只有上千条数据时，一次性将所有数据返回给客户端，无论点下一页，或搜索条件时，不向服务端发请求，实现全文检索。

这个比较简单，将sidePagination属性设为 "client",因为客户端会处理分页和全文检索，无需向服务器端发请求，所以也无需传递参数。

前端JS:

function initTable() {

            var queryUrl = '@Url.Content("~/UserInfo/QueryList")' + '?rnd=' + +Math.random();

            $table = $('#table-javascript').bootstrapTable({

                method: 'get',

                url: queryUrl,

                height: $(window).height() - 200,

                striped: true,

                pagination: true,

                pageSize: 50,

                pageList: [10, 25, 50, 100, 200],

                search: true,

                sidePagination: "client",

                showColumns: true,

                minimunCountColumns: 2,

                columns: [{

                    field: 'state',

                    radio: true

                }, {

                    field: 'Id',

                    title: 'ID',

                    align: 'right',

                    valign: 'bottom',

                    sortable: true

                }, {

                    field: 'UserName',

                    title: '姓名',

                    width: 100,

                    align: 'center',

                    valign: 'middle',

                    sortable: true,

                    formatter: nameFormatter

                }, {

                    field: 'Account',

                    title: '账号',

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'Address',

                    title: '家乡',

                    align: 'middle',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'Phone',

                    title: '电话',

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'QQ',

                    title: 'QQ号码',

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'Remark',

                    title: '备注',

                    align: 'left',

                    valign: 'top',

                    sortable: true

                }, {

                    field: 'operate',

                    title: '操作',

                    align: 'center',

                    width: 100,

                    valign: 'middle',

                    formatter: operateFormatter,

                    events: operateEvents

                }]

            });

        }

　　

后台直接返回Json数据即可。

后台代码：

public ActionResult QueryList()

        {

            try

            {

                List<sys_user> list = accessHelper.GetUserList();

                string jsonString = JsonHelper.ObjToJson(list);

                return Content(jsonString);

            }

            catch (Exception ex)

            {

                return Content(ex.Message);

            }

        }

　　

源码下载