ABP+AdminLTE+Bootstrap Table權限管理系統(tǒng)一期
Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate-Project-CMS
前往博客園總目錄:ABP+AdminLTE+Bootstrap Table權限管理系統(tǒng)一期
這張開始bootstrap table,引入項目有兩種方法,一種是直接去官網下載
地址:http://bootstrap-table.wenzhixin.net.cn/
另一種是Nuget引入.
然后就是把js引用到項目中來,其實Bootstrap js 還有jQuery我們在模板頁已經引進了,這里只需要引入bootstrap table相關的js以及中文包就可以了
<link href="~/Scripts/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="~/Scripts/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
前提是創(chuàng)建控制器userinfo,添加index視圖里面處理,創(chuàng)建視圖的時候自動選擇_Layout作為模板頁.引入需要的文件之后淮椰，我們最重要的就是定義一個空的table愚争，如上的 <table id="tb_departments"></table> 攀涵。當然Bootstrap table還提供了一種簡介的用法喻旷，直接在table標簽里面定義類似“data-...”等相關屬性龄捡，就不用再js里面注冊了耘成，但我覺得這種用法雖然簡單赞厕，但不太靈活艳狐，遇到父子表等這些高級用法的時候就不太好處理了，所以咱們還是統(tǒng)一使用在js里面初始化的方式來使用table組件皿桑。
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的點擊事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var Url = "@Url.Action("GetUsersList")";
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
// url: '../User/GetUsersList',
url: Url, //請求后臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存毫目，默認為true蔬啡，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁镀虐，默認第一頁
pageSize: 2, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
search: true, //是否顯示表格搜索箱蟆，此搜索是客戶端搜索，不會進服務端刮便，所以空猜，個人感覺意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
clickToSelect: true, //是否啟用點擊選中行
height: 500, //行高，如果沒有設置height屬性恨旱，表格自動根據記錄條數覺得表格高度
uniqueId: "ID", //每一行的唯一標識辈毯，一般為主鍵列
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
columns: [{
checkbox: true
}, {
field: 'UserName',
title: '姓名'
}, {
field: 'Email',
title: '郵箱'
}, {
field: 'Phone',
title: '手機'
}, {
field: 'Address',
title: '地址'
}, ]
});
};
//得到查詢的參數
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動搜贤，控制器也需要改成一樣的
limit: params.limit, //頁面大小
offset: params.offset, //頁碼
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
表格的初始化也很簡單谆沃，定義相關的參數即可。上面一些博主覺得重要的參數都加了注釋仪芒，并且初始化Table必須的幾個參數也用（）做了標記唁影，如果你的表格也有太多的頁面需求，直接用必須的參數就能解決掂名。同樣据沈，在columns參數里面其實也有很多的參數需要設置，比如列的排序饺蔑，對齊卓舵，寬度等等。這些比較簡單膀钠，不會涉及表格的功能掏湾，看看API就能搞定。
這里需要注意的是@Url.Action,*var Url = "@Url.Action("GetUsersList")";/ UserInfo/ GetUsersList,直接指定后臺的控制器里面的方法.
public class UserInfoController : Controller
{
private readonly IUserService _iUsersService;
public UserInfoController(IUserService iUsersService)
{
_iUsersService = iUsersService;
}
// GET: Admin/UserInfo
public ActionResult Index()
{
return View();
}
[DisableAbpAntiForgeryTokenValidation]
[HttpGet]
[DontWrapResult] //不需要AbpJsonResult
public JsonResult GetUsersList()
{
string pageNumber = string.IsNullOrWhiteSpace(Request["pageNumber"]) ? "0" : Request["pageNumber"];
string pageSize = string.IsNullOrWhiteSpace(Request["pageSize"]) ? "20" : Request["pageSize"];
List<UserInfoDto> Userlist = new List<UserInfoDto>();
Userlist = _iUsersService.GetAllList().ToList();
int totaldata = Userlist.Count();
Userlist = Userlist.Skip(int.Parse(pageNumber) * int.Parse(pageSize)).Take(int.Parse(pageSize)).ToList();
var result = new { total = totaldata, rows = Userlist };
return Json(result, JsonRequestBehavior.AllowGet);
}
}
這里有一點需要注意：如果是服務端分頁肿嘲，返回的結果必須包含total融击、rows兩個參數。漏寫或錯寫都會導致表格無法顯示數據雳窟。相反尊浪，如果是客戶端分頁，這里要返回一個集合對象到前端封救。當然我這里為了快捷,我沒有去服務里面處理分頁,直接在這里分頁,這種做法其實很low,按照之前的做法會專門封裝一個分頁DTO,然后添加自定義排序字段.我這里就不去處理了,有興趣的自己去弄一下,這些會在我下一個項目里面詳細講.這里我再網上找一張一圖片來看一下具體代碼的應用.
其實這些信息在API里面應該都有,自己看一下就可以了.
我這里分頁和菜單是自己寫的,crud的功能都是有的.
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化頁面上面的按鈕事件
//查詢角色
$("#btn_query").click(function () {
var actionUrl = "@Url.Action("GetUsersList")";
m_pagerow = 0;
$("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
});
//新增角色
$("#btn_add").click(function () {
$("#id").val("");
$("#txt_Surname").val("");
$("#txt_Name").val("");
$("#txt_UserName").val("");
$("#txt_isDeleted").val("");
$("#myModalLabel").text("新增");
$('#myModal').modal();
});
//新增角色
$("#btn_submit").click(function () {
var actionUrl = "@Url.Action("Create")";
var UserName = $("#txt_Surname").val();
var Email = $("#txt_Name").val();
var Phone = $("#txt_UserName").val();
var isnull = $("#txt_isDeleted").val();
var isDeleted = true;
if (isnull=="") {
isDeleted = false;
}
var Id = $("#id").val() == "" ? 0 : $("#id").val();
debugger;
$.ajax({
type: 'post',
dataType: "Json",
url: actionUrl,
data: { Id: Id, UserName: UserName, Email: Email, Phone: Phone, isDeleted: isDeleted },
beforeSend: function (XMLHttpRequest) {
},
success: function (data, textStatus) { //請求成功后處理函數拇涤。
toastr.warning('操作成功!');
var actionUrl = "@Url.Action("GetUsersList")";
m_pagerow = 0;
$("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
});
//編輯角色
$("#btn_edit").click(function () {
debugger;
var arrselections = $("#tb_departments").bootstrapTable('getSelections');
if (arrselections.length > 1) {
toastr.warning('只能選擇一行進行編輯');
return;
}
if (arrselections.length <= 0) {
toastr.warning('請選擇有效數據');
return;
}
$("#id").val(arrselections[0].Id);
$("#txt_Surname").val(arrselections[0].UserName);
$("#txt_Name").val(arrselections[0].Email);
$("#txt_UserName").val(arrselections[0].Phone);
$("#txt_isDeleted").val(arrselections[0].Id);
$("#myModalLabel").text("修改");
$('#myModal').modal();
//ShowModal(actionUrl, param, "編輯角色");
});
//刪除角色
$("#btn_delete").click(function () {
var actionUrl = "@Url.Action("DelUserById")";
var arrselections = $("#tb_departments").bootstrapTable('getSelections');
if (arrselections.length > 1) {
toastr.warning('只能選擇一行進行編輯');
return;
}
if (arrselections.length <= 0) {
toastr.warning('請選擇有效數據');
return;
}
var Id = arrselections[0].Id;
debugger;
$.ajax({
type: 'post',
dataType: "Json",
url: actionUrl,
data: { Id:Id},
beforeSend: function (XMLHttpRequest) {
},
success: function (data, textStatus) { //請求成功后處理函數。
toastr.warning('操作成功!');
var actionUrl = "@Url.Action("GetUsersList")";
m_pagerow = 0;
$("#tb_departments").bootstrapTable('refresh', { url: actionUrl });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
});
//權限授權
$("#btn_authorize").click(function () {
var arrselections = $("#tb_departments").bootstrapTable('getSelections');
if (arrselections.length > 1) {
toastr.warning('只能選擇一個角色進行授權');
return;
}
if (arrselections.length <= 0) {
toastr.warning('請選擇有效數據');
return;
}
var actionUrl = "@Url.Action("AuthorizePermission")";
var param = { id: arrselections[0].Id };
ShowModal_Authorize(actionUrl, param, "權限授權");
});
//模態(tài)框中“權限授權”保存
var $modal = $("#authorizeModal");
$("#btnSave", $modal).click(function () {
var actionUrl = "@Url.Action("AuthorizePermission")";
SaveModal_Authorize(actionUrl);
});
//模態(tài)框中“新增編輯角色”保存
var $formmodal = $("#modal-form");
$("#btnSave", $formmodal).click(function () {
var $tb = $("#tb_departments");
SaveModal($tb);
});
/*******彈出表單*********/
function ShowModal(actionUrl, param, title) {
debugger;
var $modal = $("#modal-form");
//表單初始化
$(".modal-title", $modal).html(title);
$("#modal-content", $modal).attr("action", actionUrl);
$.ajax({
type: "GET",
url: actionUrl,
data: param,
beforeSend: function () {
},
success: function (result) {
debugger;
$("#modal-content").html(result);
$('#modal-form').modal('show');
},
error: function () {
},
complete: function () {
}
});
}
};
return oInit;
};
自定義菜單以及彈樣式及功能.
<section class="content-header">
<h1>
用戶明細
<small>advanced cxdmles</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 主頁</a></li>
<li><a href="#">用戶管理</a></li>
<li class="active">用戶列表</li>
</ol>
</section>
<section class="content">
<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">
<div class="form-group" style="margin-top:15px">
<label class="control-label col-sm-1" for="txt_search_departmentname">姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_departmentname">
</div>
<label class="control-label col-sm-1" for="txt_search_statu">昵稱</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txt_search_statu">
</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>
</div>
</form>
</div>
</div>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-success">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
</button>
<button id="btn_authorize" type="button" class="btn btn-info ">
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>授權
</button>
</div>
<table id="tb_departments"></table>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<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>
<input type="text" name="id" class="form-control" id="id" placeholder="id" style="display:none">
<input type="text" name="txt_departmentname" class="form-control" id="txt_Surname" placeholder="真實姓名">
</div>
<div class="form-group">
<label for="txt_parentdepartment">郵箱</label>
<input type="text" name="txt_parentdepartment" class="form-control" id="txt_Name" placeholder="姓名">
</div>
<div class="form-group">
<label for="txt_departmentlevel">手機</label>
<input type="text" name="txt_departmentlevel" class="form-control" id="txt_UserName" placeholder="部門級別">
</div>
<div class="form-group">
<label for="txt_departmentlevel">是否啟用</label>
<div class="checkbox">
<label>
<input type="checkbox" disabled="disabled">
</label>
</div>
</div>
</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>
</section>
這里的菜單其實也是bootstrap 樣式.表單也是.看下控制器方法.都很簡單.
public ActionResult Create()
{
var model = new UserInfoDto();
return PartialView(model);
}
[HttpPost]
public ActionResult Create(UserInfoDto roleVm)
{
var result = _iUsersService.AddUserList(roleVm);
return Json(result);
}
[DisableAbpAntiForgeryTokenValidation]
[HttpPost]
[DontWrapResult]
public ActionResult DelUserById(string Id)
{
var result = _iUsersService.DelUsers(Id);
return Json(result);
}
Service方法.無需細說,一看就懂.
public class UserService : IUserService
{
private readonly IRepository<Users, int> _userRepository;
public ILogger Logger { get; set; }
public UserService(IRepository<Users, int> userRepository)
{
Logger = NullLogger.Instance;
_userRepository = userRepository;
}
public async Task AddUserList(UserInfoDto model)
{
var user = model.MapTo<Users>();
await _userRepository.InsertAsync(user);
}
public async Task DelUsers(string id)
{
try
{
Users user = _userRepository.Get(Int32.Parse(id));
await _userRepository.DeleteAsync(user);
}
catch (Exception ex)
{
throw;
}
}
public async Task<ListResultDto<UserInfoDto>> GetUsers()
{
var users = await _userRepository.GetAllListAsync();
return new ListResultDto<UserInfoDto>(
users.MapTo<List<UserInfoDto>>()
);
}
public List<UserInfoDto> GetAllList()
{
var users = _userRepository.GetAllListAsync();
return new List<UserInfoDto>(
users.MapTo<List<UserInfoDto>>()
);
}
}
自此,用戶列表.
返回簡書總目錄:ABP+AdminLTE+Bootstrap Table權限管理系統(tǒng)一期
前往博客園總目錄:ABP+AdminLTE+Bootstrap Table權限管理系統(tǒng)一期
