easyUI 权限管理之角色管理

来源：互联网发布：苹果cms收费采集编辑：程序博客网时间：2024/06/08 09:20

先上图。
这里写图片描述

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

<table id="box"></table><div id="tb">    <div>    <!-- //这里之所以隐藏。是因为这些按钮会根据你自己设置的权限决定是否开放    //会使用代码动态添加。或不添加。-->        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.edit(1000,500,'systemMgr/role_permission.html');" id="addPer">权限设置</a>-->        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.add(500,500,'systemMgr/role_edit.html');" id="add">添加</a>-->        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="obj.edit(500,500,'systemMgr/role_edit.html');" id="edit">修改</a>-->        <!--<a href="#" class="easyui-linkbutton" 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>

 $(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>

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())});

阅读全文

0 0