一、效果展示
二、使用方法
1）、相关css和js的引用
<link href="~/Themes/Bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Themes/Bootstrap/css/bootstrap-table.css" rel="stylesheet" /> <!---------------------------js引用-------------------------------------------> <script src="~/Themes/Bootstrap/js/jquery.min.js"></script> <script src="~/Themes/Bootstrap/js/bootstrap.js"></script> <script src="~/Themes/Bootstrap/js/bootstrap-table.js"></script> <script src="~/Themes/Bootstrap/js/bootstrap-table-zh-CN.js"></script> <script src="~/Themes/layer/layer.js"></script>
2）、页面html
<button type="button" id="btnAdd" class="btn btn-primary">添加新纪录</button> <div class="pull-right search" style="260px;"> <input class="form-control" type="text" id="txtName" placeholder="请输入姓名" style="float:left;150px;"> <button type="button" id="btnSearch" class="btn btn-primary">查询</button> </div> <table id="myTable"></table>
3）、初始化表格js和相应的增、删、改、查js事件
<script type="text/javascript">
var $table = $("#myTable");
var TableInit = function () {
var oTable = new Object();
oTable.QueryUrl = '@Url.Content("~/Home/GetList")' + '?rnd=' + +Math.random();
oTable.Init = function () {
$table.bootstrapTable({
method: 'post',//数据请求方式
url: oTable.QueryUrl,//请求数据的地址
height: $(window).height() - 100,
striped: true,
pagination: true,
pageNumber: 1,
pageSize: 10,
pageList: [5, 10, 15],
uniqueId: "ID",
sidePagination: "server", //服务端请求
queryParams: oTable.queryParams,
queryParamsType: "",
sortOrder: "desc",//默认排序方式，降序排列
columns: [{
field: 'ID',
title: 'ID',
100,
align: 'center',
valign: 'middle',
sortable: true,
sortname:'ID',//排序字段名称
formatter: idFormatter
}, {
field: 'Name',
title: '姓名',
100,
align: 'center',
valign: 'middle',
formatter: nameFormatter
}, {
field: 'operate',
title: '操作',
100,
align: 'center',
valign: 'middle',
formatter: operateFormatter,
events: operateEvents
}],
onLoadSuccess: function () {
},
onLoadError: function () {
}
});
}
oTable.queryParams = function (params) {
var temp = {
pageSize: params.pageSize,
pageIndex: params.pageNumber,
name: $("#txtName").val(),
sortOrder: params.sortOrder,
sortName:params.sortName
};
return temp;
}
function idFormatter(value, row, index) {
return row.ID;
}
function nameFormatter(value, row, index) {
return row.Name;
}
function operateFormatter(value, row, index) {
return '<a class="edit" style="cursor:pointer;" title="修改">修改</a> ' + '<a class="delete" style="cursor:pointer;" title="删除">删除</a>';
}
window.operateEvents = {
'click .edit': function (e, value, row, index) {
//修改操作,将姓名字段改为“小宝，英文名：aspen”
$.ajax({
url: '@Url.Content("~/Home/UpdateRow")',
data: { id: row.ID },
success: function (result) {
if (result.state) {
layer.msg('修改成功', { tiem: 500, icon: 1 });
$table.bootstrapTable('refresh');
}
}
});
$table.bootstrapTable('refresh');
},
'click .delete': function (e, value, row, index) {
//删除操作
layer.confirm('您确定要删除该记录吗？', {
btn: ['确定', '取消'] //按钮
}, function () {
$.ajax({
url: '@Url.Content("~/Home/DeleteRow")',
data: { id: row.ID },
success: function (result) {
if (result.state) {
layer.msg('删除成功', { tiem: 500, icon: 1 });
$table.bootstrapTable('refresh');
}
}
});
}, function () {
});
}
}
return oTable;
}
//初始化表格
$(function () {
var myTable = new TableInit();
myTable.Init();
});
//查询
$("#btnSearch").click(function () {
$table.bootstrapTable('destroy');
var myTable = new TableInit();
myTable.Init();
});
//添加
$("#btnAdd").click(function () {
$.ajax({
url: '@Url.Content("~/Home/AddRow")',
success: function (result) {
if (result.state) {
layer.msg('添加成功', { tiem: 500, icon: 1 });
$table.bootstrapTable('refresh');
}
}
});
});
</script>
4）、控制器方法
public class HomeController : Controller { static List<Person> personList = new List<Person>(); static HomeController() { for (int i = 1; i <= 100; i++) { Person person = new Person(); person.ID = i; person.Name = "小宝" + i.ToString(); personList.Add(person); } } public ActionResult List() { return View(); } public ActionResult GetList(string name,string sortOrder="desc",string sortName = "ID",int pageIndex = 1, int pageSize = 10) { var tempPersonList = personList; if (sortOrder == "desc"&&sortName=="ID") { tempPersonList = tempPersonList.OrderByDescending(p => p.ID).ToList(); } else { tempPersonList = tempPersonList.OrderBy(p => p.ID).ToList(); } if (!string.IsNullOrWhiteSpace(name)) { tempPersonList = tempPersonList.Where(p => p.Name.Contains(name)).ToList(); } var currentPersonList = tempPersonList .Skip((pageIndex - 1) * pageSize) .Take(pageSize); var total = tempPersonList.Count(); var rows = currentPersonList.Select(p => new { ID=p.ID,Name=p.Name}); return Json(new { total=total,rows=rows, state = true, msg = "加载成功" }, JsonRequestBehavior.AllowGet); } public ActionResult UpdateRow(int id) { Person person = personList.Find(p => p.ID == id); person.Name = person.Name + ",英文名:aspen"; int index= personList.FindIndex(p => p.ID == id); personList.Remove(person); personList.Insert(index, person); return Json(new { state = true, msg = "修改成功" }, JsonRequestBehavior.AllowGet); } public ActionResult DeleteRow(int id) { Person person = personList.Find(p => p.ID == id); personList.Remove(person); return Json(new { state = true, msg = "删除成功" }, JsonRequestBehavior.AllowGet); } public ActionResult AddRow() { int maxIndex= personList.Max(p => p.ID); Person person = new Person(); person.ID = maxIndex + 1; person.Name = "小宝" + person.ID.ToString(); personList.Add(person); return Json(new { state = true, msg = "添加成功" }, JsonRequestBehavior.AllowGet); } } class Person { public int ID { get; set; } public string Name { get; set; } }
项目源码下载：
http://files.cnblogs.com/files/weishuanbao/BootstrapTable.rar
参考资料：
1.Bootstrap Table API:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
2.网友分享：
http://www.imooc.com/article/8917