首先上javascript的代码
<script type="text/javascript">
$(function () {
LoadGrid();
})
//加载表格！！！
function LoadGrid() {
$('#roleGrid').datagrid({
width: 900,
striped: true, //交替条纹
fitColumns: true, //防止水平滚动
fit: true,//自动补全
iconCls: "icon-save",//图标
idField: 'RoleId', //唯一列
url: "GetRoles",
dataType: "json",
singleSelect: true, //设置为true将只允许选择一行
loadMsg: '正在拼命加载,请稍后...',
rownumbers: false, //显示行数
pagination: true, //底部分页工具栏
nowrap: true, //截取超出部分的数据
checkOnSelect: true,//点击一行的时候 checkbox checked(选择)/unchecked(取消选择)
pageNumber: 1,//初始化分页码。
pageSize: 10, //初始化每页记录数。
pageList: [5, 10, 30], //初始化每页记录数列表
showFooter: false, //定义是否显示行底
columns: [[
{ field: "RoleId", title: "角色编号", width: 60, align: "center", sortable: "true" },
{ field: "RoleName", title: "角色名称", width: 100, align: "center" },
{ field: "RoleRemarks", title: "备注", width: 100, align: "center" },
{
field: "IsStatus", title: "状态", width: 60, align: "center", formatter: function (value, row, index) {
if (value == "0") {
return "正常";
} else if (value == "1") {
return "停用";
}
}
},
{
field: "edit", title: "操作", align: "center", width: 80, formatter: function (value, row, index) {
var detail = '<a style="padding:1px;color:black;" onclick="editRole(' + index + ')"><i class="fa fa-edit"></i>编辑</a>';
var deleteBtn = '<a style="color:black;" onclick="delRole(' + index + ')"><i class="fa fa-trash-o"></i>删除</>';
var setrole = '<a style="color:black;" onclick="setRights(' + index + ')"><i class="fa fa-exclamation-triangle"></i>设置权限</>';
return " " + detail + " | " + deleteBtn + " | " + setrole;
}
}
]] //列
});
};
function editRole(i) { //编辑按钮的方法
var rows = $("#roleGrid").datagrid("getRows");
layer.open({
title: false,
type: 2,
closeBtn: false,
area: ['420px', '418px'],
skin: 'layui-layer-rim', //加上边框
content: ['/Admin/ShowForm/EidtRole', 'no'],
success: function (layero, index) {
var body = layer.getChildFrame('body', index);
body.contents().find("#roleId").val(rows[i].RoleId);
body.contents().find("#roleName").val(rows[i].RoleName);
if (rows[i].RoleRemarks != "-") {
body.contents().find("#remarks").val(rows[i].RoleRemarks);
}
body.contents().find("#isstutas").val(rows[i].IsStatus);
}
});
}
function delRole(i) { //删除用户
var rows = $("#roleGrid").datagrid("getRows");
var postData = {
roleId: rows[i].RoleId
};
layer.confirm('确认删除该角色？', {
btn: ['确认', '取消'], //按钮
shade: false //不显示遮罩
}, function (index) {
$.ajax({
type: "POST",
url: "DeleRole",
data: postData,
success: function (result) {
if (result == "true") {
layer.msg("操作成功！", {
icon: 6,
time: 1000,
}, function () {
$("#roleGrid").datagrid("reload");
layer.close(index);
});
} else if (result == "false") {
layer.msg("操作失败！", { icon: 2 });
} else if (result == "msg") {
layer.msg("系统错误,请联系管理员！", { icon: 0 });
}
}
});
}, function (index) {
layer.close(index);
});
}
然后是html
<table id="roleGrid"> </table>
最后是控制器的方法（这一部分是最重要的，表格能否显示数据，全看这一部分）
/// <summary>
/// 动态生成表格的数据
/// </summary>
/// <param name="page"></param>
/// <param name="rows"></param>
/// <returns></returns>
public JsonResult GetRoles(int? page, int? rows)
{
page = page == null ? : page; //第几页
rows = rows == null ? : rows; //行数
List<role> rList = rService.GetAllRoles(Convert.ToInt32(page), Convert.ToInt32(rows));
List<role> roleList = new List<role>();
for (int i = ; i < rList.Count; i++)
{
role r = new role();
r.RoleId = rList[i].RoleId;
r.RoleName = rList[i].RoleName;
if (string.IsNullOrEmpty(rList[i].RoleRemarks))
{
r.RoleRemarks = "-";
}
else
{
r.RoleRemarks = rList[i].RoleRemarks;
}
r.IsStatus = rList[i].IsStatus;
roleList.Add(r);
}
var json = new
{
total = rService.GetTotal(),
rows = roleList
};
return Json(json, JsonRequestBehavior.AllowGet);
}
最后的最后是控制器相关的方法
/// <summary>
/// 分页的数据
/// </summary>
/// <param name="page"></param>
/// <param name="rows"></param>
/// <returns></returns>
public List<role> GetAllRoles(int page, int rows)
{
using (diamondEntities entity = new diamondEntities())
{
IQueryable<role> role = entity.roles.OrderBy(a => a.RoleId).Skip((page - ) * rows).Take(rows);
List<role> roleList = role.ToList<role>();
if (roleList.Count > )
{
return roleList;
}
else
{
return null;
}
}
} /// <summary>
/// 获取总页数
/// </summary>
/// <returns></returns>
public int GetTotal()
{
using (diamondEntities entity = new diamondEntities())
{
IQueryable<role> user = entity.roles.Select(m => m);
List<role> userList = user.ToList();
return userList.Count;
}
}
持续关注我吧，最近项目紧，我还是会把碰见的东西写出来的。
---------------------------------------------------------------------------------------------------------
转载请记得说明作者和出处哦-.-
作者：KingDuDu
原文出处：https://www.cnblogs.com/kingdudu/articles/4742111.html
---------------------------------------------------------------------------------------------------------