27.获取分配权限说里的选中的和未确定的节点id
1.父菜单有五棵树，
1.父菜单有5棵树。
2.其中有子菜单多一棵树。所以就是8棵树。
==============2.获取父菜单有多少颗树================
=====我们要的是父菜单ul,要用一个只带选择器，加一个大于号；例如： alert($("#windowOper >ul").length);
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>用户角色</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.msgProcess.js"></script> <script type="text/javascript"> //=====================1.加载数据====================== $(function () { $('#Windowp').window('close');//编辑默认关闭 $("#tbList").datagrid({ width: 'auto', height: 400, striped: true, singleSelect: true, url: '/admin/Role/index', //queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true,//启用分页，默认每页10行 rownumbers: true,//显示页码，默认 提供 10 - 50 的页容量选择下拉框 pageSize: 10,//设置 页容量为 5 pageList: [10, 15, 20, 25, 30],//设置 页容量下拉框 fitColumns:true, columns: [[ { field: 'rIsShow', title: '显示', width:5,align: "center", formatter: function (value) { return value ? "√":"X"; } }, { field: 'rId', title: 'ID', width: 20, align: "center" }, { field: 'Ou_Department', title: '部门', width: 20, align: "center", formatter: function (value) { return value.depName } }, { field: 'rName', title: '角色名', width: 20, align: "center" }, { field: 'rIsDel', title: '是否删除', width: 20, align: "center", formatter: function (value) { switch (value.toString()) { case "false": return "否"; case "true": return "是"; } } }, { field: 'rRemark', title: '备注', width: 20, align: "center" } ]], toolbar: [ '-', { iconCls:'icon-edit_add', text: "分配权限", handler: providePermission } ], //设置选中行 onSelect: function (rowI, rD) { selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量 } }); }) //1.将中的行设置为全局变量 var selectRowIndex = -1; //分配权限 function providePermission() { //获取选中 的 角色数据 var roleData = $("#tbList").datagrid("getSelected"); if (roleData) { //拿到角色id $.get("/admin/role/getroleTrue/" + roleData.rId, null, function (jsobj) { if (jsobj.Statu) $.procAjaxData(jsobj); else $("#windowOper").html(jsobj); }); } else { $.alertMsg("请选中您要分配权限的角色数据", "系统提示"); } $("#windowOper").wimdow("open"); } function saveNewPermission() { alert($("#windowOper >ul").length);//用只带选择器，大于号，查询出父的ui，所以是5. } </script> </head> <body> <table id="tbList" style="width:700px;height:250px"></table> <div id="Windowp" class="easyui-window" title="分配权限" style="width:750px; height:300px;" data-options="iconCls:'icon-save',modal:true,title:'分配权限'"> @*<div id="easyui-window" class="easyui-layout" data-options="fit:true">*@ <div id="windowOper" data-options="region:'center',style="padding:10px;"> </div> <div data-options="region:'south',border:false," style="text-align:right;padding:5px;"> <a class="easyui-linkbutton" data-options="iconCls:'icon-save'," href="javascript:void(0)" onclick="saveNewPermission()">保存</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')">取消</a> </div> @*</div>*@ </div> </body> </html>
=======================3.获取第一颗树的，选中长度==================
保存后：弹出第一颗树，选中的长度。第一颗树的长度是2.
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>用户角色</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.msgProcess.js"></script> <script type="text/javascript"> //=====================1.加载数据====================== $(function () { $('#Windowp').window('close');//编辑默认关闭 $("#tbList").datagrid({ width: 'auto', height: 400, striped: true, singleSelect: true, url: '/admin/Role/index', //queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true,//启用分页，默认每页10行 rownumbers: true,//显示页码，默认 提供 10 - 50 的页容量选择下拉框 pageSize: 10,//设置 页容量为 5 pageList: [10, 15, 20, 25, 30],//设置 页容量下拉框 fitColumns:true, columns: [[ { field: 'rIsShow', title: '显示', width:5,align: "center", formatter: function (value) { return value ? "√":"X"; } }, { field: 'rId', title: 'ID', width: 20, align: "center" }, { field: 'Ou_Department', title: '部门', width: 20, align: "center", formatter: function (value) { return value.depName } }, { field: 'rName', title: '角色名', width: 20, align: "center" }, { field: 'rIsDel', title: '是否删除', width: 20, align: "center", formatter: function (value) { switch (value.toString()) { case "false": return "否"; case "true": return "是"; } } }, { field: 'rRemark', title: '备注', width: 20, align: "center" } ]], toolbar: [ '-', { iconCls:'icon-edit_add', text: "分配权限", handler: providePermission } ], //设置选中行 onSelect: function (rowI, rD) { selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量 } }); }) //1.将中的行设置为全局变量 var selectRowIndex = -1; //分配权限 function providePermission() { //获取选中 的 角色数据 var roleData = $("#tbList").datagrid("getSelected"); if (roleData) { //拿到角色id $.get("/admin/role/getroleTrue/" + roleData.rId, null, function (jsobj) { if (jsobj.Statu) $.procAjaxData(jsobj); else $("#windowOper").html(jsobj); }); } else { $.alertMsg("请选中您要分配权限的角色数据", "系统提示"); } $("#windowOper").wimdow("open"); } function saveNewPermission() { var $tree = $("#windowOper >ul");//获取所有的树 var nodes = $($tree[0]).tree("getChecked");//获取第一棵树 alert(nodes.length);//弹出选中的长度 }; </script> </head> <body> <table id="tbList" style="width:700px;height:250px"></table> <div id="Windowp" class="easyui-window" title="分配权限" style="width:750px; height:300px;" data-options="iconCls:'icon-save',modal:true,title:'分配权限'"> @*<div id="easyui-window" class="easyui-layout" data-options="fit:true">*@ <div id="windowOper" data-options="region:'center',style="padding:10px;"> </div> <div data-options="region:'south',border:false," style="text-align:right;padding:5px;"> <a class="easyui-linkbutton" data-options="iconCls:'icon-save'," href="javascript:void(0)" onclick="saveNewPermission()">保存</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')">取消</a> </div> @*</div>*@ </div> </body> </html>
保存：弹出第一颗树选中的权限数量。
======4.获取分配权限说里的选中的========
index
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>用户角色</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.msgProcess.js"></script> <script type="text/javascript"> //=====================1.加载数据====================== $(function () { $('#Windowp').window('close');//编辑默认关闭 $("#tbList").datagrid({ width: 'auto', height: 400, striped: true, singleSelect: true, url: '/admin/Role/index', //queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true,//启用分页，默认每页10行 rownumbers: true,//显示页码，默认 提供 10 - 50 的页容量选择下拉框 pageSize: 10,//设置 页容量为 5 pageList: [10, 15, 20, 25, 30],//设置 页容量下拉框 fitColumns:true, columns: [[ { field: 'rIsShow', title: '显示', width:5,align: "center", formatter: function (value) { return value ? "√":"X"; } }, { field: 'rId', title: 'ID', width: 20, align: "center" }, { field: 'Ou_Department', title: '部门', width: 20, align: "center", formatter: function (value) { return value.depName } }, { field: 'rName', title: '角色名', width: 20, align: "center" }, { field: 'rIsDel', title: '是否删除', width: 20, align: "center", formatter: function (value) { switch (value.toString()) { case "false": return "否"; case "true": return "是"; } } }, { field: 'rRemark', title: '备注', width: 20, align: "center" } ]], toolbar: [ '-', { iconCls:'icon-edit_add', text: "分配权限", handler: providePermission } ], //设置选中行 onSelect: function (rowI, rD) { selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量 } }); }) //1.将中的行设置为全局变量 var selectRowIndex = -1; //分配权限 function providePermission() { //获取选中 的 角色数据 var roleData = $("#tbList").datagrid("getSelected"); if (roleData) { //拿到角色id $.get("/admin/role/getroleTrue/" + roleData.rId, null, function (jsobj) { if (jsobj.Statu) $.procAjaxData(jsobj); else $("#windowOper").html(jsobj); }); } else { $.alertMsg("请选中您要分配权限的角色数据", "系统提示"); } $("#windowOper").wimdow("open"); } function saveNewPermission() { var nodeId = ""; var $tree = $("#windowOper >ul");//1.获取所有的树 for (var i = 0; i < $tree.length; i++) {//2.遍历所有树 //3.获取每颗树里的 选中的节点 var node = $($tree[i]).tree("getChecked"); //4.遍历节点 for (var j = 0; j < node.length;j++) { nodeId += node[j].id + ","+node[j].text;//5.选中的id和名称 } alert(nodeId); } } </script> </head> <body> <table id="tbList" style="width:700px;height:250px"></table> <div id="Windowp" class="easyui-window" title="分配权限" style="width:750px; height:300px;" data-options="iconCls:'icon-save',modal:true,title:'分配权限'"> @*<div id="easyui-window" class="easyui-layout" data-options="fit:true">*@ <div id="windowOper" data-options="region:'center',style="padding:10px;"> </div> <div data-options="region:'south',border:false," style="text-align:right;padding:5px;"> <a class="easyui-linkbutton" data-options="iconCls:'icon-save'," href="javascript:void(0)" onclick="saveNewPermission()">保存</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')">取消</a> </div> @*</div>*@ </div> </body> </html>
getroleTrue.cshtml(角色分配权限页)
@model MODEL.ViewModel.RolePermissionTree <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <input type="hidden" value="@ViewBag.roleId" id="roleId" /> @*1.循环所有父菜单，为每个父菜单生成一棵树*@ @for (int i = 0; i < Model.Allparent.Count; i++) { var parent = Model.Allparent[i]; <ul id="tt@(i)" class="easyui-tree" style="display:inline-table;margin:5px;" data-options="checkbox:true,lines:true,cascadeCheck:false"> <li data-options="id:@parent.pid@if(Model.UserPer.Where(uPer => uPer.pid == parent.pid).Count() > 0){//把父菜单pid赋值给id;获取选中的复选框 <text>,checked:true</text>}"> <span>@parent.pName</span> <ul> @*2.生成子菜单，从所有菜单集合中 查出 属于当前循环 父菜单 的子菜单*@ @foreach (var son in Model.AllPer.Where(p => p.pParent == parent.pid).ToList()) { @*3.如果 当前子菜单 和 用户菜单一样，则需设置为选中状态*@ <li data-options="id:@son.pid@if(Model.UserPer.Where(uPer=>uPer.pid==son.pid).Count()>0){//把子菜单权限pid赋值id，获取选中的复选框 <text>,checked:true</text>}"> <span><a href="#">@son.pName</a></span> </li> } </ul> </li> </ul> }
单击：保存按钮弹出，选中的子权限。
==============5.获取分配权限说里的选中的和未确定的节点id==============
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>用户角色</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="~/EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="~/Scripts/jquery.msgProcess.js"></script> <script type="text/javascript"> //=====================1.加载数据====================== $(function () { $('#Windowp').window('close');//编辑默认关闭 $("#tbList").datagrid({ width: 'auto', height: 400, striped: true, singleSelect: true, url: '/admin/Role/index', //queryParams:{}, loadMsg: '数据加载中请稍后……', pagination: true,//启用分页，默认每页10行 rownumbers: true,//显示页码，默认 提供 10 - 50 的页容量选择下拉框 pageSize: 10,//设置 页容量为 5 pageList: [10, 15, 20, 25, 30],//设置 页容量下拉框 fitColumns:true, columns: [[ { field: 'rIsShow', title: '显示', width:5,align: "center", formatter: function (value) { return value ? "√":"X"; } }, { field: 'rId', title: 'ID', width: 20, align: "center" }, { field: 'Ou_Department', title: '部门', width: 20, align: "center", formatter: function (value) { return value.depName } }, { field: 'rName', title: '角色名', width: 20, align: "center" }, { field: 'rIsDel', title: '是否删除', width: 20, align: "center", formatter: function (value) { switch (value.toString()) { case "false": return "否"; case "true": return "是"; } } }, { field: 'rRemark', title: '备注', width: 20, align: "center" } ]], toolbar: [ '-', { iconCls:'icon-edit_add', text: "分配权限", handler: providePermission } ], //设置选中行 onSelect: function (rowI, rD) { selectRowIndex = rowI;//1.1将中的行设置为全局变量 设置给全局变量 } }); }) //1.将中的行设置为全局变量 var selectRowIndex = -1; //分配权限 function providePermission() { //获取选中 的 角色数据 var roleData = $("#tbList").datagrid("getSelected"); if (roleData) { //拿到角色id $.get("/admin/role/getroleTrue/" + roleData.rId, null, function (jsobj) { if (jsobj.Statu) $.procAjaxData(jsobj); else $("#windowOper").html(jsobj); }); } else { $.alertMsg("请选中您要分配权限的角色数据", "系统提示"); } $("#windowOper").wimdow("open"); } function saveNewPermission() { var nodeId = ""; var $tree = $("#windowOper >ul");//1获取所有的树 for (var i = 0; i < $tree.length; i++) {//2.遍历所有树 //3.获取每颗树里的 选中的节点 var nodes = $($tree[i]).tree("getChecked"); //3.1获取每颗树里的 选中的节点 var node2 = $($tree[i]).tree('getChecked', 'indeterminate'); //3.2将两个节点数组合并 nodes = nodes.concat(node2); //4.遍历节点 for (var j = 0; j < nodes.length;j++) { nodeId += nodes[j].id+"," ; } } alert(nodeId); } </script> </head> <body> <table id="tbList" style="width:700px;height:250px"></table> <div id="Windowp" class="easyui-window" title="分配权限" style="width:750px; height:300px;" data-options="iconCls:'icon-save',modal:true,title:'分配权限'"> @*<div id="easyui-window" class="easyui-layout" data-options="fit:true">*@ <div id="windowOper" data-options="region:'center',style="padding:10px;"> </div> <div data-options="region:'south',border:false," style="text-align:right;padding:5px;"> <a class="easyui-linkbutton" data-options="iconCls:'icon-save'," href="javascript:void(0)" onclick="saveNewPermission()">保存</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')">取消</a> </div> @*</div>*@ </div> </body> </html>
