.Net MVC+bootstrap Table学习
一、效果展示
二、使用方法
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