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