首页 > 代码库 > .Net MVC+bootstrap Table学习
.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="width:260px;"> <input class="form-control" type="text" id="txtName" placeholder="请输入姓名" style="float:left;width: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: "",
columns: [{
field: ‘ID‘,
title: ‘ID‘,
width: 100,
align: ‘center‘,
valign: ‘middle‘,
sortable: true,
formatter: idFormatter
}, {
field: ‘Name‘,
title: ‘姓名‘,
width: 100,
align: ‘center‘,
valign: ‘middle‘,
formatter: nameFormatter
}, {
field: ‘operate‘,
title: ‘操作‘,
width: 100,
align: ‘center‘,
valign: ‘middle‘,
formatter: operateFormatter,
events: operateEvents
}],
onl oadSuccess: function () {
},
onl oadError: function () {
}
});
}
oTable.queryParams = function (params) {
var temp = {
pageSize: params.pageSize,
pageIndex: params.pageNumber,
name: $("#txtName").val(),
sortOrder: params.sortOrder
};
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",int pageIndex = 1, int pageSize = 10) { var tempPersonList = personList; if (sortOrder == "desc") { 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
.Net MVC+bootstrap Table学习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。