easyUI 权限管理之角色管理

来源:互联网 时间:2017-06-13

先上图。

这里只简单的介绍核心代码。其他网格数据请参考官网去构造。
html

<table id="box"></table><div id="tb"> <div> <!-- //这里之所以隐藏。是因为这些按钮会根据你自己设置的权限决定是否开放 //会使用代码动态添加。或不添加。--> <!--<a href="#" iconCls="icon-add" plain="true" onclick="obj.edit(1000,500,'systemMgr/role_permission.html');" id="addPer">权限设置</a>--> <!--<a href="#" iconCls="icon-add" plain="true" onclick="obj.add(500,500,'systemMgr/role_edit.html');" id="add">添加</a>--> <!--<a href="#" iconCls="icon-edit" plain="true" onclick="obj.edit(500,500,'systemMgr/role_edit.html');" id="edit">修改</a>--> <!--<a href="#" iconCls="icon-remove" plain="true" onclick="obj.remove()" id="remove">删除</a>--> <form id="search" style="display: inline"> <input type="text" class="textbox" name="roleName" placeholder="角色名称"> <select class="form-control textbox" name="disable" > <option value="">--是否禁用--</option> <option value="0">否</option> <option value="1">是</option> </select> <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.searchLog();">查询</a> </form> </div></div>

js

 $(function () { function getColumn(){ var mydata={ roleId:"角色Id", roleName:"角色名称", remark:"备注", createTime:"创建时间", disableText:"是否禁用" } var i=0 var columnObj=[]; var option={}; $.each(mydata,function(key,value){ myobj={"field":key,"title":value,"sortable":true} if(key=='remark'){ myobj.formatter=remarkFormater; } columnObj.push(myobj); i++; }) option.columns=new Array(columnObj); option.title='角色管理' return option; } var obj=new getObj(); obj.options=getColumn() boxDatagrid(obj.options); });
//公共jsfunction boxDatagrid(options){ var title= getMenuName() var url=obj.htmlName+'/search' var options2= initGrid(url,'#tb') options2.title=title $.extend(options, options2); $('#box').datagrid(options);}function initGrid(url,tool){ var options2 ={ url : url, method:"POST", fit:true, toolbar :tool, iconCls : 'icon-search', striped : true, nowrap : true, rownumbers : false, singleSelect : true, remoteSort:false, pagination : true, pageSize : 30, pageList : [10,30,50,150], pageNumber : 1, sortOrder : 'DESC' } return options2}function getObj(){// document.write('<' + 'script type="text/javascript" src=' + '/../../js/public.js' + '"></' + 'script>'); obj = { /** * htmlName:当前网页的名称如"/carOwner" *适用于数据列表的显示和查询、删除 "/carOwner/search","/carOwner/delById" */ htmlName:"/"+getPageName1(), url:"", editRow : undefined, isAdd:false, selectItemData:undefined, isStartEndTime:true,//开始时间和结束时间是否为空? tipArr:[],//开始时间结束时间的tip 的index的集合; test:function(){ alert("test"); }, searchLog : function () { if(!this.isStartEndTime){ $.messager.alert('警告', '必须填写完整的开始时间和结束时间!', 'warning'); return } this.tipArr=[] var data={}; $("#search").serializeArray().map(function(x){ data[x.name]= x.value; }) $('#box').datagrid({ queryParams: data }); }, search : function () { var value = $('input[name="parkName"]').val() //search 字段便利"[{'param':'parkName','value':'测试1号停车场'}]" $('#box').datagrid({ queryParams: { params:searchJson() //"[{'param':'parkName','value':'"+value+"'}]" } }); }, add : function (w,h,url,title) { this.isAdd=true; this.selectItemData=$('#box').datagrid("getRows")[0]; showEditWindow(w,h,url,title); }, edit : function (w,h,url,title) { var rows = $('#box').datagrid('getSelections'); console.log(rows); if (rows.length == 1) { var index = $('#box').datagrid('getRowIndex', rows[0]); this.selectItemData=rows[0]; this.isAdd=false; showEditWindow(w,h,url,title); } else { $.messager.alert('警告', '修改必须或只能选择一行!', 'warning'); } }, remove : function() { var rows = $('#box').datagrid('getSelections'); if (rows.length > 0) { $.messager.confirm('确定操作', '您正在要删除所选的记录吗?', function (flag) { if (flag) { var ids ; var field=obj.options.columns[0][0].field; ids=field+"="+rows[0][field] console.log(ids+"ids"); myAjax(obj.htmlName+"/delById",'GET', ids ) } }); } else { $.messager.alert('提示', '请选择要删除的记录!', 'info'); } } }; return obj;}

html

<body class="easyui-layout" ><div data-options="region:'west',title:'菜单列表',split:true" style="width:300px;"> <table id="box0" ></table></div><div data-options="region:'center',title:'功能列表'" style="background:#eee;"> <table id="box" ></table></div>

js

var seletMenuId;var treeTotalData=[];var powerTotalData=[];//后台获取的初始化数据var powerTotalIdArr=[];//被勾选的功能Id的集合var api = frameElement.api, W = frameElement.api.opener;var roleId= W.obj.selectItemData.roleId$(function () { api.button({ id:'mySubmit', focus: true, name:'提交', callback:function(){ var powerIds=powerTotalIdArr; if(powerIds.length==0){ powerIds=[' '] } $.ajax({ type : "GET", url : "/authority/bindFunction", data : {roleId:roleId,powerIds:powerIds}, cache:false, success : function (data) { W.doSuccess(data); api.close(); } }) return false } })//功能 function getColumn(){ var mydata={ id:'M1', powerId:"功能Id", powerName:"功能名称", powerUrl:"功能路径", menuId:"菜单Id", remark:"备注", createTime:"创建时间", disableText:"是否禁用", icon:"图标" } var mydata2=[{ id:'M1', powerId:"功能Id", powerName:"功能名称", powerUrl:"功能路径", menuId:"菜单Id", remark:"备注", createTime:"创建时间", disableText:"是否禁用", icon:"图标" },{ id:'M1', powerId:"功能Id", powerName:"功能名称", powerUrl:"功能路径", menuId:"菜单Id", remark:"备注", createTime:"创建时间", disableText:"是否禁用", icon:"图标", checked:true } ] var i=0 var columnObj=[]; var option={}; var myobj $.each(mydata,function(key,value){ myobj={"field":key,"title":value} if(key=="id"){ myobj.checkbox=true; } if(key=='remark'){ myobj.formatter=remarkFormater; } columnObj.push(myobj); i++; })// option=initGrid("/power/search",'')// option.checkbox=true; option.columns=new Array(columnObj);// option.title='菜单管理'; option.singleSelect=false;// option.data=mydata2; option.rownumbers=true; option.fit=true; option.onCheck=function(indexdata,rowData){ rowData.checked=true;// var obj={// menuId:seletMenuId,// powerId:rowData.powerId// } powerTotalIdArr.push(rowData.powerId) console.log("++++++++powerTotalIdArr",powerTotalIdArr) }; option.onUncheck=function(indexdata,rowData){ rowData.checked=false; var powerId=rowData.powerId; powerTotalIdArr.splice($.inArray(powerId,powerTotalIdArr),1) console.log("-----powerTotalIdArr",powerTotalIdArr) } option.onSelectAll=function(rowData){ for(var i=0;i<rowData.length;i++){ rowData[i].checked=true; powerTotalIdArr.push(rowData[i].powerId) } } option.onUnselectAll=function(rowData){ for(var i=0;i<rowData.length;i++){ rowData[i].checked=false; for(var k=0;k<powerTotalIdArr.length;k++){ if(powerTotalIdArr[k]==rowData[i].powerId){ powerTotalIdArr.splice(k,1) } } } } return option; } //菜单 function getColumnTree(){ var mydata={ id:'M1', menuId:"菜单Id", menuName:"菜单名称" } //测试data var mydata2={ id:'M1', menuId:"菜单Id", menuName:"菜单名称", menuUrl:"菜单路径", parentId:"父级节点", leaf:"0", remark:"备注", createTime:"创建时间", disable:"是否禁用状态", disableText:"是否禁用文字", icon:"图标", children:[{ id:'M2', menuId:"菜单Id1", menuName:"菜单名称", menuUrl:"菜单路径", parentId:"M1", leaf:1, remark:"备注", createTime:"创建时间", disable:"是否禁用状态", disableText:"是否禁用文字", icon:"图标", checked:true },{ id:'M3', menuId:"菜单Id2", menuName:"菜单名称", menuUrl:"菜单路径", parentId:"M1", leaf:1, remark:"备注", createTime:"创建时间", disable:"是否禁用状态", disableText:"是否禁用文字", icon:"图标" } ] }// 测试 treeTotalData=mydata2 var i=0 var columnObj=[]; var option={}//=initGrid("/menu/getRoleMenu",'') var myobj={} $.each(mydata,function(key,value){ myobj={"field":key,"title":value} if(key=="id"){ myobj.checkbox=true; } if(key=="menuId"){ myobj.width=100;// myobj.formatter=function(value,row,index){//// return value;// } } if(key=='remark'){ myobj.formatter=remarkFormater; } columnObj.push(myobj); i++; }) $('#box0').treegrid({ method:'get', url:"/menu/getRoleMenu?roleId="+roleId, singleSelect:false, checkOnSelect:false, fit:true, idField:'id', treeField:"menuId", animate:true, checkbox:true, onlyLeafCheck:false, multiple:true,// data:[mydata2], rownumbers : true, columns:new Array(columnObj), onClickRow:function(rowData){ if(rowData.checked){ if(!powerTotalData){layer.alert("没有功能数据!");return} if(rowData.leaf==1){ /** * 菜单点击叶子节点时。功能列表显示菜单的功能。 */ seletMenuId=rowData.menuId var data={}; var arr=[] for(var i=0;i< powerTotalData.length;i++){ if(powerTotalData[i].menuId==rowData.menuId){ arr.push(powerTotalData[i]) } } data.rows=arr $('#box').datagrid({data:data}); }else{ $('#box').datagrid('loadData', { total: 0, rows: [] }); } } }, onCheck:function(rowData){ rowData.checked=true; if(!powerTotalData){layer.alert("没有功能数据!");return} if(rowData.leaf==1){ /** * 菜单点击叶子节点时。功能列表显示菜单的功能。 */ seletMenuId=rowData.menuId var data={}; var arr=[] for(var i=0;i< powerTotalData.length;i++){ if(powerTotalData[i].menuId==rowData.menuId){ arr.push(powerTotalData[i]) } } data.rows=arr $('#box').datagrid({data:data}); }else{ $('#box').datagrid('loadData', { total: 0, rows: [] }); } }, onUncheck:function(rowData){ rowData.checked=false; $('#box').datagrid('loadData', { total: 0, rows: [] }); if(rowData.leaf==1){ /** * 菜单取消勾选叶子节点时。功能菜单的所有勾选取消。 */ seletMenuId=rowData.menuId for(var i=0;i< powerTotalData.length;i++){ if(powerTotalData[i].menuId==rowData.menuId){ for(var k=0;k<powerTotalData.length;k++){ if(powerTotalData[i].powerId==powerTotalIdArr[k]){ powerTotalIdArr.splice(k,1) } } powerTotalData[i].checked=false; console.log(powerTotalData[i].powerId,"-----++---powerTotalIdArr",powerTotalIdArr) } } } }, onLoadSuccess:function(row, data){ console.log(data,"dddddddd") if(data){ treeTotalData=data; } $(".layout-panel-west .tree-folder").parents(".datagrid-row").find(".datagrid-cell-check ").empty(); } }) $(".layout-panel-west .datagrid-header-check ").empty(); } var obj=new getObj();// obj.htmlName="/power" obj.options=getColumn();// boxDatagrid(obj.options); $("#box").datagrid(getColumn()) getColumnTree() $.ajax({ type : "GET", url : "/menu/getRolePower", data : {roleId:roleId}, cache:false, success : function (data) { powerTotalData=data.rows; for(var i=0;i<powerTotalData.length;i++){ if(powerTotalData[i].checked==true){ powerTotalIdArr.push(powerTotalData[i].powerId) } } } })// $("#box0").treegrid(getColumnTree())});

相关阅读:
Top