1.引用EasyUI的相关插件,在html文档中编写datagrid,如下:
<div class="easyui-layout" data-options="border: false,fit: true">
<div data-options="region:'center',border: false">
<table id="AdminList" class="easyui-datagrid" style="width:100%;height:100%;"
data-options="
rownumbers: true,
fitColumns: true,
striped: true,
singleSelect: true,
pagination: true,
pageSize: 20,
pageList: [20,50,100],
toolbar: '#A_tool',
remoteSort: false,
multiSort: true,
onClickRow: OnclickAdminRow
">
<thead>
<tr>
<th data-options="field:'LoginName',width:150,halign:'center',align:'left',sortable:true,fixed:true">账号</th>
<th data-options="field:'Name',width:150,halign:'center',align:'left',sortable:true,fixed:true">昵称</th>
<th data-options="field:'State',width:100,halign:'center',align:'center',sortable:true,fixed:true,formatter:formatState">状态</th>
<th data-options="field:'CreateTime',width:120,halign:'center',align:'left',sortable:true,fixed:false">创建时间</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="A_tool" class="pd-12-20">
<div class="float-l">
<label>关键字:</label>@Html.TextBox("Keyword", "", new { @class = "input-txt-te width-150", @autocomplete = "off" })
<a href="javascript:void(0)" class="easyui-linkbutton a-success" οnclick="SearchAdmin()"><i class="fa fa-search i-green"></i> 搜索</a>
</div>
<div class="float-r">
<a href="javascript:void(0)" class="easyui-linkbutton a-purple" plain="true" οnclick="AddAdmin()"><i class="fa fa-plus i-blue"></i> 添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton a-info" plain="true" οnclick="EditAdmin()"><i class="fa fa-edit i-orange"></i> 编辑</a>
<a href="javascript:void(0)" class="easyui-linkbutton a-info" plain="true" οnclick="SetAdminStatus(0)" id="AdminEnable"><i class="fa fa-play i-green"></i> 启用</a>
<a href="javascript:void(0)" class="easyui-linkbutton a-red" plain="true" οnclick="SetAdminStatus(1)" id="AdminDisable"><i class="fa fa-square i-browm"></i> 停用</a>
</div>
<div class="clear"></div>
</div>
2.在js中实现加载数据,如下:
<script type="text/javascript">
$(function () {
LoadAdminListDataGrid();
})
function LoadAdminListDataGrid() {
var keywordVal = $('#Keyword').val();
$("#AdminList").datagrid({
url: '@Url.Action("GetAdminDataGrid", "Admin")',
method: 'get',
queryParams: {//这里是查询的参数,如果有多个参数直接写在这里即可
Keyword: keywordVal
}
});
}
function formatState(val, row, index) {
if (row.State == 0) {
val = '<span style="display:inline-block;background-color:#abbac3;color:#fff;padding:1px 5px;">' +
'正常' +
'</span>';
}
else {
val = '<span style="display:inline-block;background-color:#d15b47;color:#fff;padding:1px 5px;">' +
'停用' +
'</span>';
}
return val;
}
function SearchAdmin() {
LoadAdminListDataGrid();
}
function AddAdmin() {
layer.open({
title: '添加员工', //标题
type: 2, //什么类型的弹窗:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
anim: 2, //弹窗动画效果
area: ['450px', '320px'], //弹窗宽高
offset: 'auto', //弹窗的位置
maxmin: false, //是否显示最大化和最小化
content: '@Url.Action("AddAdmin","Admin")', //内容
cancel: function (index, layero) { //关闭按钮事件
RefreshAdmin();
}
});
}
function RefreshAdmin() {
$('#AdminList').datagrid('reload');
}
function EditAdmin() {
var row = $('#AdminList').datagrid('getSelected');
if(row) {
var url = '@Url.Action("EditAdmin", "Auth")';
url += "?id=" + row.Id;
layer.open({
title: '编辑用户', //标题
type: 2, //什么类型的弹窗:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
anim: 2, //弹窗动画效果
area: ['450px', '370px'], //弹窗宽高
offset: 'auto', //弹窗的位置
maxmin: false, //最大化/最小化
content: url,
cancel: function (index, layero) { //关闭按钮事件
RefreshAdmin();
}
});
}
else {
var msg = "请选中需要编辑的数据,在执行此操作!";
layer.alert(msg, { title: '提示', offset: 'auto', icon: 0 });
}
}
function OnclickAdminRow(index, row) {
if (row) {
if (row.State == 0) {
$('#AdminEnable').linkbutton('disable');
$('#AdminDisable').linkbutton('enable');
}
else {
$('#AdminEnable').linkbutton('enable');
$('#AdminDisable').linkbutton('disable');
}
}
}
function SetAdminStatus(type) {
var msg, status;
if (type == 0) {
msg = "请选中需要启用的数据,在执行此操作!";
status = 0;
}
else {
msg = "请选中需要停用的数据,在执行此操作!";
status = 1;
}
var row = $('#AdminList').datagrid('getSelected');
if (row) {
var url = '@Url.Action("SetAdminState", "Admin")';
$.ajax({
url: url,
type: "Post",
data: { id: row.Id, state: status },
dataType: "json",
success: function (obj) {
var statusTxt = status == 0 ? "启用" : "停用";
//obj.Status == 0:表示成功,1:表示失败,2:表示提示
if (obj.Status == 0) {
layer.msg('【' + row.LoginName + '】' + '已被' + statusTxt);
RefreshAdmin();
row.Status = status; //将状态更新为修改后的状态以便去调用onClickAttributeRow方法
OnclickAdminRow(row);
}
if (obj.Status == 1) {
layer.msg('【' + row.LoginName + '】' + statusTxt + "失败!");
}
}
});
}
else {
layer.alert(msg, { title: '提示', offset: 'auto', icon: 0 });
}
}
</script>
3.调用控制器方法,如下:
(关键:page和rows参数必须是小写的,这是由EasyUI框架自定义决定的)
/// <summary>
/// 获取员工列表数据
/// </summary>
/// <param name="page">当前第几页</param>
/// <param name="rows">当前页行数</param>
/// <returns></returns>
public ActionResult GetAdminDataGrid(AdminListForm form)
{
try
{
//获取员工列表的方法,PaginationParameter是自己封装的分页方法,
//往下看会看到查询的linq的方法,可以不用管PaginationParameter究竟要怎么写
var adminList = _adminService.GetAdminList(new AdminPara()
{
Keyword = form.Keyword,
PaginationParameter = PaginationHelper.GetPagingByDescend(form.page, form.rows),
});
List<object> list = new List<object>();
adminList.Items.ToList().ForEach(item =>
{
list.Add(new
{
Id = item.Id,
LoginName = item.LoginName,
Name = item.Name,
State = item.State,
CreateTime = item.CreateTime.ToyyyyMMddHHmmss()
});
});
var dataGrid = _commonService.GetGridFormat(adminList.TotalCount, list);
return Json(dataGrid, JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
Log.InfoFormat("获取员工列表数据:{0}", e.Message);
var dataGrid = _commonService.GetGridFormat(0, "");
return Json(dataGrid, JsonRequestBehavior.AllowGet);
}
}
AdminListForm类:
public class AdminListForm
{
/// <summary>
/// 关键字(账号或昵称)
/// </summary>
public string Keyword { get; set; }
/// <summary>
/// 当前页数
/// </summary>
public int? page { get; set; }
/// <summary>
/// 当前页总行数
/// </summary>
public int? rows { get; set; }
}
查询linq方法:
/// <summary>
/// 根据条件获取管理员列表
/// </summary>
/// <param name="AdminPara"></param>
/// <returns></returns>
public IList<AdminInfo> GetAdminList(AdminPara adminPara)
{
#region
//构造查询语句
var query = (from a in Entities.T_Admins
select new AdminInfo()
{
Id = a.Id,
Name = a.Name,
LoginName = a.LoginName,
Password = a.Password,
State = a.State,
CreateTime = a.CreateTime,
});
if (!string.IsNullOrEmpty(adminPara.Keyword))
{
var keyword = adminPara.Keyword.Trim();
query = query.Where(a => a.Name.Contains(keyword) || a.LoginName.Contains(keyword));
}
var totalCount = query.Select(a => a.Id).LongCount();
//排序
query = query.OrderBy(a => a.Id);
//分页
if (adminPara.StartIndex.HasValue)
query = query.Skip(adminPara.StartIndex.Value);
if (adminPara.MaxCount.HasValue)
query = query.Take(adminPara.MaxCount.Value);
var adminList = query.ToList();
return adminList;
#endregion
}