15.选中行和修改【用户权限管理】
============================用户权限管理===================================================
================1.用户权限管理编辑｛datagrid数据表格选中行，遍历行属性，居中｝================
1.用户权限管理
1.datagrid(数据表格)行居中内容；2.toolbar编辑和新增按钮；3.datagrid(数据表格)中formatter属性；
4.选中换行：又回到了datagrid数据表格
5.编辑按钮放外面：handler: editRow
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>123</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> $(function () { $('#editWindow').window('close'); $("#tbList").datagrid({ width: 'auto', height: 300, striped: true, singleSelect: true, url: '/admin/sys/GetPermData', queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true, rownumbers: true, columns: [[ { field: 'pid', title: 'ID', width: 100, align: "center" }, { field: 'pName', title: '权限名', width: 100, align: "center" }, { field: 'pAreaName', title: '区域名', width: 100, align: "center" }, { field: 'pControllerName', title: '控制名', width: 100, align: "center" }, { field: 'pActionName', title: 'Action', width: 100, align: "center" }, { field: 'pFormMethod', title: '请求方式', width: 100, align: "center", formatter: function (value) { return value == "1" ? "Get" : "post"; } }, { field: 'pOperationType', title: '操作类型', width: 100, align: "center" } ]], toolbar: [{ iconCls: 'icon-edit', text:"编辑", handler: editRow }, '-', { iconCls: 'icon-add', text: "新增", handler: function () { alert('新增按钮3') } }], }); }) function editRow() {
//获取选中行里的数据 var row = $("#tbList").datagrid("getSelected");//getSelected返回第一个选中的行
//遍历行元素 for(var i in row) { alert(i); } } </script> </head> <body> <table id="tbList" style="width:400px;height:250px"> </table> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.Mvc; using MVCOA.Helper; namespace MVCOA.Login.Admin { /// <summary> /// 系统管理 /// </summary> public class SysController : Controller { #region 1.0 权限列表 视图 +Permission() [HttpGet] /// <summary> /// 权限列表 视图 /// </summary> /// <returns></returns> public ActionResult Permission() { return View(); } #endregion #region 1.1 权限列表 数据 +Permission() [HttpPost] /// <summary> /// 权限列表 视图 /// </summary> /// <returns></returns> public ActionResult GetPermData() { //1 查询数据 var list = OperateContext.Current.BLLSession.IOu_PermissionBLL.GetListBy(p => p.pIsDel == false).Select(p=>p.ToPOCO()); //2 生成规定格式的 json字符串发回 给 异步对象 //return OperateContext.Current.RedirectAjax("ok", "加载成功~", list, ""); MODEL.EasyUIModel.DataGridModel dgModel = new MODEL.EasyUIModel.DataGridModel() { total = list.Count(), rows = list, footer = null }; return Json(dgModel); }
结果：
选中行:
单击就会遍历出第一行的属性：
pid，pName，pAreaName，pControllerName，pActionName.....
===========================2.用户权限管理：修改功能拿到行号===============
onSelect事件：拿到行号。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>123</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> $(function () { $('#editWindow').window('close'); $("#tbList").datagrid({ width: 'auto', height: 300, striped: true, singleSelect: true, url: '/admin/sys/GetPermData', queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true, rownumbers: true, columns: [[ { field: 'pid', title: 'ID', width: 100, align: "center" }, { field: 'pName', title: '权限名', width: 100, align: "center" }, { field: 'pAreaName', title: '区域名', width: 100, align: "center" }, { field: 'pControllerName', title: '控制名', width: 100, align: "center" }, { field: 'pActionName', title: 'Action', width: 100, align: "center" }, { field: 'pFormMethod', title: '请求方式', width: 100, align: "center", formatter: function (value) { return value == "1" ? "Get" : "post"; } }, { field: 'pOperationType', title: '操作类型', width: 100, align: "center" } ]], toolbar: [{ iconCls: 'icon-edit', text:"编辑", handler: editRow }, '-', { iconCls: 'icon-add', text: "新增", handler: function () { alert('新增按钮3') } }], // rowIndex：选择的行的索引值，索引从0开始。rowData：对应于所选行的记录。 onSelect: function (rowI, rD) { selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量 } }); }) //1.将中的行设置为全局变量 var selectRowIndex = -1; //编辑按钮方法 function editRow() { //获取选中行里的数据! var rowData = $("#tbList").datagrid("getSelected");//getSelected返回一个选中的行 //获取行的下标 alert(selectRowIndex); } </script> </head> <body> <table id="tbList" style="width:400px;height:250px"> </table> </body> </html>
=====================3.用户权限管理编辑=====================
编辑window窗体
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>123</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> $(function () { $('#winds').window('close');//编辑默认关闭 $("#tbList").datagrid({ width: 'auto', height: 300, striped: true, singleSelect: true, url: '/admin/sys/GetPermData', queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true, rownumbers: true, columns: [[ { field: 'pid', title: 'ID', width: 100, align: "center" }, { field: 'pName', title: '权限名', width: 100, align: "center" }, { field: 'pAreaName', title: '区域名', width: 100, align: "center" }, { field: 'pControllerName', title: '控制名', width: 100, align: "center" }, { field: 'pActionName', title: 'Action', width: 100, align: "center" }, { field: 'pFormMethod', title: '请求方式', width: 100, align: "center", formatter: function (value) { return value == "1" ? "Get" : "post"; } }, { field: 'pOperationType', title: '操作类型', width: 100, align: "center" } ]], toolbar: [{ iconCls: 'icon-edit', text:"编辑", handler: editRow //编辑方法 }, '-', { iconCls: 'icon-add', text: "新增", handler: function () { alert('新增按钮3') } }], //设置选中行 onSelect: function (rowI, rD) { selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量 } }); }) //1.将选中的行设置为全局变量 var selectRowIndex = -1; //编辑按钮方法 function editRow() { //1.获取选中行里的数据! //var rowData = $("#tbList").datagrid("getSelected");//getSelected返回一个选中的行 //获取行的下标 //alert(selectRowIndex); //$("#tbList").datagrid("selectRow",7);//单击编辑会选中第8行 //2.获取所有选中行的数据 //var $selectedRow = $("#tbList").datagrid("getSelections"); //alert($selectedRow[0]); //想获取 选中行对象，没想到办法 //3.修改面板window $('#winds').window('open');//window打开 } </script> </head> <body> <table id="tbList" style="width:400px;height:250px">
</table> <div id="winds" class="easyui-window" title="用户权限编辑" style="width:600px;height:400px;" resizable="true" data-options="iconCls:'icon-save',modal:true"> Window Content </div> </body> </html>
效果图：单击编辑=》弹出编辑窗口
===========================4.用户权限管理：单击编辑，展示编辑界面===============
1.界面上要产生那些文本框，还要验证，jquery验证很麻烦，而且代码也很多。2.如果是来看列表，不要编辑很新增。
3.开始就把修改面板不合适。
4.写个分布视图。
1.在sys控制器中添加：编辑用户权限action方法 EditPermission()
2.在分布区域视图：sys文件下添加EditPermission编辑视图，选择[1创建强类型视图，2模型类OU_Permission(MODEL),3支架模版Edit;4创建为分布视图]
5添加强类型视图：在EditPermission编辑视图上，@model MODEL.ViewModel.Permission,就会过滤掉不想显示的字段；】
3.到时这个编辑页面拼接到主页去。
1主页代码
@{ Layout = null;}
<!DOCTYPE html>
<html>
<head>
<title>123</title>
<link href="~/EasyUI/themes/icon.css" rel="stylesheet" />
<link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$(function () {
$('#winds').window('close');//编辑默认关闭
$("#tbList").datagrid({
width: 'auto',
height: 300,
striped: true,
singleSelect: true,
url: '/admin/sys/GetPermData',
queryParams:{},
loadMsg: '数据加载中请稍后……',
pagination: true,
rownumbers: true,
columns: [[
{ field: 'pid', title: 'ID', width: 100, align: "center" },
{ field: 'pName', title: '权限名', width: 100, align: "center" },
{ field: 'pAreaName', title: '区域名', width: 100, align: "center" },
{ field: 'pControllerName', title: '控制名', width: 100, align: "center" },
{ field: 'pActionName', title: 'Action', width: 100, align: "center" },
{
field: 'pFormMethod', title: '请求方式', width: 100, align: "center", formatter: function (value) {
return value == "1" ? "Get" : "post";
}
},
{ field: 'pOperationType', title: '操作类型', width: 100, align: "center" }
]],
toolbar: [{
iconCls: 'icon-edit',
text:"编辑",
handler: editRow
}, '-', {
iconCls: 'icon-add',
text: "新增",
handler: function () { alert('新增按钮3') }
}],
//设置选中行
onSelect: function (rowI, rD) {
selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量
}
});
})
//1.将中的行设置为全局变量
var selectRowIndex = -1;
//编辑按钮方法
function editRow() {
//1.获取选中行里的数据!
var rowData = $("#tbList").datagrid("getSelected");//getSelected返回一个选中的行
$('#winds').window('open');//打开
//load(trl,data,callback)
//把区域编辑加载到：vinds用户权限编辑div上。
$("#winds").load("/admin/sys/EditPermission");//区域/控制器/action方法
}
</script>
</head>
<body>
<table id="tbList" style="width:400px;height:250px">
</table>
<div id="winds" class="easyui-window" title="用户权限编辑" style="width:600px;height:400px;" resizable="true" data-options="iconCls:'icon-save',modal:true">
</div>
</body>
</html>
2.编辑控制器
using System.Text; using System.Web.Mvc; using MVCOA.Helper; namespace MVCOA.Login.Admin { /// <summary> /// 系统管理 /// </summary> public class SysController : Controller { #region 1.2加载 权限修改 窗体html /// <summary> /// 1.2加载 权限修改 窗体html /// </summary> /// <returns></returns> public ActionResult EditPermission() { return PartialView(); }
3.用户权限编辑视图
用分布用户权限编辑强类型视图：@model MODEL.ViewModel.Permission。下面的代码是自动生成的。
@model MODEL.ViewModel.Permission <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> @*//1.提交到哪个方法；/2.控制器;/3.post提交*@ @using (Html.BeginForm("EditPermission", "sys", FormMethod.Post)) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>Ou_Permission</legend> <div class="editor-label"> @Html.LabelFor(model => model.pid) </div> <div class="editor-field"> @Html.EditorFor(model => model.pid) @Html.ValidationMessageFor(model => model.pid) </div> <div class="editor-label"> @Html.LabelFor(model => model.pParent) </div> <div class="editor-field"> @Html.EditorFor(model => model.pParent) @Html.ValidationMessageFor(model => model.pParent) </div> <div class="editor-label"> @Html.LabelFor(model => model.pName) </div> <div class="editor-field"> @Html.EditorFor(model => model.pName) @Html.ValidationMessageFor(model => model.pName) </div> <div class="editor-label"> @Html.LabelFor(model => model.pAreaName) </div> <div class="editor-field"> @Html.EditorFor(model => model.pAreaName) @Html.ValidationMessageFor(model => model.pAreaName) </div> <div class="editor-label"> @Html.LabelFor(model => model.pControllerName) </div> <div class="editor-field"> @Html.EditorFor(model => model.pControllerName) @Html.ValidationMessageFor(model => model.pControllerName) </div> <div class="editor-label"> @Html.LabelFor(model => model.pActionName) </div> <div class="editor-field"> @Html.EditorFor(model => model.pActionName) @Html.ValidationMessageFor(model => model.pActionName) </div> <div class="editor-label"> @Html.LabelFor(model => model.pFormMethod) </div> <div class="editor-field"> @Html.EditorFor(model => model.pFormMethod) @Html.ValidationMessageFor(model => model.pFormMethod) </div> <div class="editor-label"> @Html.LabelFor(model => model.pOperationType) </div> <div class="editor-field"> @Html.EditorFor(model => model.pOperationType) @Html.ValidationMessageFor(model => model.pOperationType) </div> <div class="editor-label"> @Html.LabelFor(model => model.pOrder) </div> <div class="editor-field"> @Html.EditorFor(model => model.pOrder) @Html.ValidationMessageFor(model => model.pOrder) </div> <div class="editor-label"> @Html.LabelFor(model => model.pIsShow) </div> <div class="editor-field"> @Html.EditorFor(model => model.pIsShow) @Html.ValidationMessageFor(model => model.pIsShow) </div> <div class="editor-label"> @Html.LabelFor(model => model.pRemark) </div> <div class="editor-field"> @Html.EditorFor(model => model.pRemark) @Html.ValidationMessageFor(model => model.pRemark) </div> <p> <input type="submit" value="Save" /> </p> </fieldset> }
===========================5.用户权限管理：单击编辑，展示编辑界面===============
1.添加编辑Permission实体；2.编辑EditPermission.cshtml页上，使用强类型@model MODEL.ViewModel.Permission实体，编辑扩展实体。
2.load方法传id进去，
3方法也要传个id接收，方法id是路由赔的同名的id;
Permission权限表单页
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>123</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> $(function () { $('#winds').window('close');//编辑默认关闭 $("#tbList").datagrid({ width: 'auto', height: 300, striped: true, singleSelect: true, url: '/admin/sys/GetPermData', queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true, rownumbers: true, columns: [[ { field: 'pid', title: 'ID', width: 100, align: "center" }, { field: 'pName', title: '权限名', width: 100, align: "center" }, { field: 'pAreaName', title: '区域名', width: 100, align: "center" }, { field: 'pControllerName', title: '控制名', width: 100, align: "center" }, { field: 'pActionName', title: 'Action', width: 100, align: "center" }, { field: 'pFormMethod', title: '请求方式', width: 100, align: "center", formatter: function (value) { return value == "1" ? "Get" : "post"; } }, { field: 'pOperationType', title: '操作类型', width: 100, align: "center" } ]], toolbar: [{ iconCls: 'icon-edit', text:"编辑", handler: editRow }, '-', { iconCls: 'icon-add', text: "新增", handler: function () { alert('新增按钮3') } }], //设置选中行 onSelect: function (rowI, rD) { selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量 } }); }) //1.将中的行设置为全局变量 var selectRowIndex = -1; //编辑按钮方法 function editRow() { //1.获取选中行里的数据! var rowData = $("#tbList").datagrid("getSelected");//getSelected返回一个选中的行 $('#winds').window('open');//打开 //load发送异步请求权限修改页面。并直接加载到 当前的 修改窗体中 $("#winds").load("/admin/sys/EditPermission/"+rowData.pid);//修改实体的pid，pid是权限id，传到修改方法 } </script> </head> <body> <table id="tbList" style="width:400px;height:250px"> </table> <div id="winds" class="easyui-window" title="用户权限编辑" style="width:600px;height:400px;" resizable="true" data-options="iconCls:'icon-save',modal:true"> </div> </body> </html>
编辑：控制器
using System.Text; using System.Web.Mvc; using MVCOA.Helper; namespace MVCOA.Login.Admin { /// <summary> /// 系统管理 /// </summary> public class SysController : Controller { #region 1.0 权限列表 视图 +Permission() [HttpGet] /// <summary> /// 权限列表 视图 /// </summary> /// <returns></returns> public ActionResult Permission() { return View(); } #endregion #region 1.1 权限列表 数据 +Permission() [HttpPost] /// <summary> /// 权限列表 视图 /// </summary> /// <returns></returns> public ActionResult GetPermData() { //1 查询数据 var list = OperateContext.Current.BLLSession.IOu_PermissionBLL.GetListBy(p => p.pIsDel == false).Select(p=>p.ToPOCO()); //2 生成规定格式的 json字符串发回 给 异步对象 //return OperateContext.Current.RedirectAjax("ok", "加载成功~", list, ""); MODEL.EasyUIModel.DataGridModel dgModel = new MODEL.EasyUIModel.DataGridModel() { total = list.Count(), rows = list, footer = null }; return Json(dgModel); } #endregion #region 1.2加载 权限修改 窗体html /// <summary> /// 1.2加载 权限修改 窗体html /// </summary> /// <returns></returns> public ActionResult EditPermission(int id)//这个id是路由配置带过来的id { //pid是权限主键id，//id是路由配置带过来的id; var listt= OperateContext.Current.BLLSession.IOu_PermissionBLL.GetListBy(c => c.pid == id).FirstOrDefault().ToViewModel(); return PartialView(listt); } } }
编辑实体
using System; using System.Collections.Generic; using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Text; namespace MODEL.ViewModel { public class Permission { [DisplayName("ID")] public int pid { get; set; } [DisplayName("父级")] public int pParent { get; set; } [DisplayName("权限名")] [Required] public string pName { get; set; } [DisplayName("区域名")] [Required] public string pAreaName { get; set; } [DisplayName("控制器名")] public string pControllerName { get; set; } [DisplayName("方法名")] public string pActionName { get; set; } [DisplayName("请求方式")] public short pFormMethod { get; set; } [DisplayName("操作方式")] public short pOperationType { get; set; } [DisplayName("序号")] public int pOrder { get; set; } [DisplayName("是否在菜单显示")] public bool pIsShow { get; set; } [DisplayName("备注")] [DataType(DataType.MultilineText)] public string pRemark { get; set; } } }
生成 ViewModel 实体对象 +ViewModel.Permission ToViewModel()
ViewModel.permission实体对象。
using MODEL.EasyUIModel; using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace MODEL { public partial class Ou_Permission { #region 1.0 生成 很纯洁的 实体对象 +Ou_Permission ToPOCO() /// <summary> /// 生成 很纯洁的 实体对象 /// </summary> /// <returns></returns> #region 1.1 生成 ViewModel 实体对象 +ViewModel.Permission ToViewModel() /// <summary> /// 生成 ViewModel 实体对象 编辑的实体 /// </summary> /// <returns></returns> public ViewModel.Permission ToViewModel() { ViewModel.Permission viewModel = new ViewModel.Permission() { pid = this.pid, pParent = this.pParent, pName = this.pName, pAreaName = this.pAreaName, pControllerName = this.pControllerName, pActionName = this.pActionName, pFormMethod = this.pFormMethod, pOperationType = this.pOperationType, pOrder = this.pOrder, pIsShow = this.pIsShow, pRemark = this.pRemark }; return viewModel; }
浙公网安备 33010602011771号