用MVC做一个bootstrap-table的实例

最新推荐文章于 2025-06-14 04:06:57 发布

原创最新推荐文章于 2025-06-14 04:06:57 发布 · 置顶 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#MVC #bootstrap-table-edit #knockout-min.js #bootstrap

MVC 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍如何在MVC框架下结合bootstrap-table创建一个实例，内容涉及HTML前端的构建，强调了正确引用js和css文件的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台HTML：注意需要引用js和css

<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width" />
<title>BootStrap Table使用</title><link href="~/Scripts/bootstrap-table-develop/dist/bootstrap-editable.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />@*1、Jquery组件引用*@
<link href="~/Scripts/bootstrap-table-develop/dist/bootstrap-table.css" rel="stylesheet" /> <script src="~/Scripts/jquery-2.2.4.js"></script><script src="~/Scripts/bootstrap-table-develop/dist/bootstrap-editable.js"></script>
@*2、bootstrap组件引用*@ <script src="~/Scripts/bootstrap.js"></script> @*3、bootstrap table组件以及中文包的引用*@<script src="~/Scripts/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Scripts/bootstrap-table-develop/dist/bootstrap-table.js"></script> <script src="~/Scripts/bootstrap-table-develop/dist/bootstrap-table-editable.js"></script><script src="~/Scripts/Home/js/yhjcxxgl.js"></script>
<script src="~/Scripts/bootstrap-table-develop/dist/knockout-min.js"></script> <script src="~/Scripts/bootstrap-table-develop/dist/knockout.mapping.js"></script> @*4、页面Js文件的引用*@</head><body> @*查询条件*@<div class="form-group" style="margin-top:15px">
<div class="panel-body" style="padding-bottom:0px;"> <div class="panel panel-default"> <div class="panel-heading">查询条件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"><label class="control-label col-sm-1" for="txt_search_txt_UserStudentID">学号</label>
<label class="control-label col-sm-1" for="txt_search_UserName">用户名</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_UserName"> </div> <div class="col-sm-3"></div>
<input type="text" class="form-control" id="txt_search_txt_UserStudentID"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button> </div> </form> </div> </div></button>*@
@*工具栏和table*@ <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> @*<button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改<div class="modal-content">
<button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="tb_departments"></table> </div> @*添加用户dialog*@ <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-header"><input type="text" name="txt_departmentname" data-bind="value:UserName" class="form-control" id="txt_departmentname" placeholder="用户姓名">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">添加用户</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="txt_departmentname">用户姓名</label> </div> <div class="form-group"> <label for="txt_departmentUserStudentID">用户学号</label><label for="txt_departmentUserNickname">用户昵称</label>
<input type="text" name="txt_departmentUserStudentID" data-bind="value:UserStudentID" class="form-control" id="txt_departmentUserStudentID" placeholder="用户学号"> </div> <div class="form-group"> <label for="txt_departmentUserPwd">用户密码</label> <input type="text" name="txt_departmentUserPwd" data-bind="value:UserPwd" class="form-control" id="txt_departmentUserPwd" placeholder="用户密码"> </div> <div class="form-group"><input type="text" name="txt_departmentUserCellPhone" data-bind="value:UserCellPhone" class="form-control" id="txt_departmentUserCellPhone" placeholder="用户手机号码">
<input type="text" name="txt_departmentUserNickname" data-bind="value:UserNickname" class="form-control" id="txt_departmentUserNickname" placeholder="用户昵称"> </div> <div class="form-group"> <label for="txt_departmentUserGender">用户性别</label> <input type="text" name="txt_departmentUserGender" data-bind="value:UserGender" class="form-control" id="txt_departmentUserGender" placeholder="用户性别"> </div> <div class="form-group"> <label for="txt_departmentUserCellPhone">用户手机号码</label> </div> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button> <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button> </div> </div> </div> </div> </div></body></html>

js:用了单元格编辑（bootstrap-table-editable.js），和knockout.mapping.js

$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();operate.operateInit();
//2.初始化Button的点击事件 //客户端搜索框$("#selectkuang").before("<div style='position:absolute;left:-60px;'>手机号:</div>");
$("#btn_query").click(function () { //点击查询是 使用刷新 处理刷新参数 var opt = {UserCellPhone: $("#txt_search_UserName").val(),
url: "/Users/yhjcxxgl", silent: true, query: {$('#tb_departments').bootstrapTable('refresh', opt);
UserStudentID: $("#txt_search_txt_UserStudentID").val() //条件2 .... } }; });})var TableInit = function () {url: '/Users/yhjcxxgl', //请求后台的URL（*）
var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
method: 'post', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色queryParams: oTableInit.queryParams,//传递参数（*）
pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*）minimumCountColumns: 2, //最少允许的列数
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮cardView: false, //是否显示详细视图
clickToSelect: true, //是否启用点击选中行 height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle: true, //是否显示详细视图和列表视图的切换按钮field: 'UserName',
detailView: false, //是否显示父子表 editable: true, //是否启用编辑 columns: [{ checkbox: true }, { field: 'UserID', title: '用户ID' }, { title: '用户姓名', editable: {type: 'text',
type: 'text', title: '用户姓名', validate: function (v) { if (!v) return '用户名不能为空'; } } }, { field: 'UserStudentID', title: '学号', editable: { title: '学号',editable: {
validate: function (v) { if (isNaN(v)) return '学号必须是数字'; if (!v) return '学号不能为空'; if (v.length < 12 || v.length > 15) return '学号必须为12位数到15位数'; } } }, { field: 'UserPwd', title: '用户密码', type: 'text',validate: function (v) {
title: '用户密码', validate: function (v) { if (!v) return '用户密码不能为空'; } } }, { field: 'UserNickname', title: '用户昵称', editable: { type: 'text', title: '用户昵称', if (!v) return '用户昵称不能为空';title: '手机号',
} } }, { field: 'UserGender', title: '性别', editable: { type: 'text', title: '性别', validate: function (v) { if (!v) return '性别不能为空'; } } }, { field: 'UserCellPhone',url: "/Users/Edit",
editable: { type: 'text', title: '手机号', validate: function (v) { if (!v) return '手机号不能为空'; } } }], onEditableSave: function (field, row, oldValue, $el) { //可进行异步操作 $.ajax({ type: "post", data: row,oTableInit.queryParams = function (params) {
dataType: 'JSON', success: function (data) { if (data == "1") { alert('提交数据成功'); } }, error: function () { alert('编辑失败'); } }); } }); }; //得到查询的参数 var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的Level: ko.observable(),
limit: params.limit, //页面大小 offset: params.offset, //页码 search: params.search }; return temp; }; return oTableInit;};//操作// 操作var operate = { // 初始化按钮事件 operateInit: function () { this.operateAdd(); this.operateDelete(); this.DepartmentModel = { id: ko.observable(), //和标签中的data-bind 对应 Name: ko.observable(), Des: ko.observable(),UserPwd: ko.observable(),
CreateTime: ko.observable() }; }, // 新增 operateAdd: function () { $('#btn_add').on( "click", function () { $("#myModal").modal().on( "shown.bs.modal", function () { var oEmptyModel = { UserName: ko.observable(), UserStudentID: ko.observable(),operate.operateSave();
UserNickname: ko.observable(), UserGender: ko.observable(), UserCellPhone: ko.observable() }; ko.utils.extend(operate.DepartmentModel, oEmptyModel); ko.applyBindings(operate.DepartmentModel, document.getElementById("myModal"));{
}).on('hidden.bs.modal', function () { ko.cleanNode(document.getElementById("myModal")); }); }); }, // 删除 operateDelete: function () { //当点击删除的时候 会进入这个方法 $('#btn_delete').on("click",function () { var arrselectedData = $("#tb_departments").bootstrapTable( 'getSelections'); if (arrselectedData.length <= 0) { alert("请选中一行"); } else if(confirm("确定删除该用户吗?"))}
var postData = []; for (var i = 0; i < arrselectedData.length; i++) { postData.push(arrselectedData[i].UserID); } $.ajax({ url: "/Users/DeleteUsers", type: "post", data: { listId: postData //传输到后台的是 json对象 后台接收后需要转换成list 然后循环获取id删除 }, success: function (data) { if (data > 0) { alert("成功删除该用户所有信息");if (oDataModel.UserName == undefined || oDataModel.UserName.trim() == "" || oDataModel.UserStudentID == undefined || oDataModel.UserStudentID.trim() == "" || oDataModel.UserPwd == undefined || oDataModel.UserPwd.trim() == "" || oDataModel.UserNickname == undefined || oDataModel.UserNickname.trim() == "" || oDataModel.UserGender == undefined || oDataModel.UserGender.trim() == "" || oDataModel.UserCellPhone == undefined || oDataModel.UserCellPhone.trim() == "") {
else { alert("删除失败"); } $("#tb_departments").bootstrapTable('refresh'); } }); } }) }, operateSave: function () { //当点击保存的时候回跳到这个方法 $('#btn_submit').on("click", function () { // 取到当前的viewmodel var oViewModel = operate.DepartmentModel; // 将Viewmodel转换为数据model var oDataModel = ko.toJS(oViewModel); console.info(oDataModel);"UserCellPhone": oDataModel.UserCellPhone
alert("不能为空"); } else { var span = $("#span").html(); $.ajax({ url: "/Users/addusers", //url type: "post", data: { //参数 "UserName": oDataModel.UserName, "UserStudentID": oDataModel.UserStudentID, "UserPwd": oDataModel.UserPwd, "UserNickname": oDataModel.UserNickname, "UserGender": oDataModel.UserGender, },alert("只能编辑一行数据");
success: function (data) { if (data=="1") { alert("添加用户成功"); } else { alert("添加用户失败"); } $("#tb_departments").bootstrapTable('refresh'); } }); } }); }, // 数据校验 operateCheck: function (arr) { if (arr.length <= 0) { alert("请至少选择一行数据"); return false; } if (arr.length > 1) {hou
return false; } return true; }};

后台（mvc）：

using System;
using System.Collections.Generic;
using System.Linq;using System.Web.Mvc;
using System.Web;using Newtonsoft.Json;
using BBS后台.Models;public class UsersController : Controller
namespace BBS后台.Appapi{ {//模糊查询和初始化表格数据
BBSEntities db = new BBSEntities(); [HttpPost]public JsonResult yhjcxxgl(int limit, int offset, string search = "", string UserName = "", string UserStudentID = "")
{if (search != "")
var users = db.Users.Select(item => new { item.UserID, item.UserName, item.UserStudentID, item.UserPwd, item.UserNickname, item.UserGender, item.UserCellPhone }).ToList();users = db.Users.Where(u => u.UserCellPhone.Contains(search.Trim())).Select(item => new { item.UserID, item.UserName, item.UserStudentID, item.UserPwd, item.UserNickname, item.UserGender, item.UserCellPhone }).ToList();
{ } else if (UserName != "") {users = db.Users.Where(u => u.UserName.Contains(UserName.Trim())).Select(item => new { item.UserID, item.UserName, item.UserStudentID, item.UserPwd, item.UserNickname, item.UserGender, item.UserCellPhone }).ToList();
} else if (UserStudentID != "") {else if (UserName != "" && UserStudentID != "")
users = db.Users.Where(u => u.UserStudentID.Contains(UserStudentID.Trim())).Select(item => new { item.UserID, item.UserName, item.UserStudentID, item.UserPwd, item.UserNickname, item.UserGender, item.UserCellPhone }).ToList(); } {var total = users.Count();
users = db.Users.Where(u => u.UserName.Contains(UserName.Trim()) && u.UserStudentID.Contains(UserStudentID.Trim())).Select(item => new { item.UserID, item.UserName, item.UserStudentID, item.UserPwd, item.UserNickname, item.UserGender, item.UserCellPhone }).ToList(); } var rows = users.Skip(offset).Take(limit).ToList(); return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet); } // POST: Users/添加一行数据 [HttpPost]user.UserCellPhone = users.UserCellPhone;
public JsonResult addusers(FormCollection collection, Users users) { try { int i = 0; if (users != null) { Users user = new Users(); user.UserName = users.UserName; user.UserStudentID = users.UserStudentID; user.UserPwd = users.UserPwd; user.UserNickname = users.UserNickname; user.UserGender = users.UserGender; user.RoleID = 2;Users user = db.Users.First<Users>(u => u.UserID == users.UserID);
user.UserState = "Y"; db.Users.Add(user); i = db.SaveChanges(); } return Json(i.ToString(), JsonRequestBehavior.AllowGet); } catch (Exception ex) { throw ex; } } //行内编辑 [HttpPost] public JsonResult Edit(Users users) { try { int i = 0; if (users != null) { user.UserName = users.UserName;// GET: 删除用户--关联得外键表太多，暂时没想到好的办法缩减代码
user.UserStudentID = users.UserStudentID; user.UserPwd = users.UserPwd; user.UserNickname = users.UserNickname; user.UserGender = users.UserGender; user.UserCellPhone = users.UserCellPhone; i = db.SaveChanges(); } return Json(i.ToString(), JsonRequestBehavior.AllowGet); } catch (Exception ex) { throw ex; } } [HttpPost] public JsonResult DeleteUsers(List<int> listId) {var list7 = db2.Like.Where(u => listId.Contains(u.UserID));
int j = 0; try { using (BBSEntities db2 = new BBSEntities()) { var list1 = db2.Article.Where(u => listId.Contains(u.UserID)); var list2 = db2.Attention.Where(u => listId.Contains(u.UserID)); var list3 = db2.Blacklist.Where(u => listId.Contains(u.UserID)); var list4 = db2.Collection.Where(u => listId.Contains(u.UserID)); var list5 = db2.Comment.Where(u => listId.Contains(u.UserID)); var list6 = db2.Hate.Where(u => listId.Contains(u.UserID));}
var list8 = db2.Pictrue.Where(u => listId.Contains(u.UserID)); var list9 = db2.PrivateLetter.Where(u => listId.Contains(u.UserID)); var list10 = db2.Report.Where(u => listId.Contains(u.UserID)); var list11 = db2.Attention.Where(u=>listId.Contains(u.AttentionUserID)); var list = db2.Users.Where(u => listId.Contains(u.UserID)); foreach (var item in list1) { if (item != null) { db2.Article.Remove(item); } foreach (var item in list2) {foreach (var item in list5)
if (item != null) { db2.Attention.Remove(item); } } foreach (var item in list3) { if (item != null) { db2.Blacklist.Remove(item); } } foreach (var item in list4) { if (item != null) { db2.Collection.Remove(item); } } {{
if (item != null) { db2.Comment.Remove(item); } } foreach (var item in list6) { if (item != null) { db2.Hate.Remove(item); } } foreach (var item in list7) { if (item != null) { db2.Like.Remove(item); } } foreach (var item in list8)if (item != null)
if (item != null) { db2.Pictrue.Remove(item); } } foreach (var item in list9) { if (item != null) { db2.PrivateLetter.Remove(item); } } foreach (var item in list10) { if (item != null) { db2.Report.Remove(item); } } foreach (var item in list11) {}
{ db2.Attention.Remove(item); } } foreach (var user in list) { if (user != null) { db2.Users.Remove(user); } } j += db2.SaveChanges(); } } catch (Exception ex) { throw ex; } return Json(j, JsonRequestBehavior.AllowGet); }}