easyUI 权限管理之菜单管理

来源：互联网发布：directmail 阿里云编辑：程序博客网时间：2024/05/22 04:35

这是/webView/systemMgr\roleMenu.html
这里写图片描述

菜单列表和功能列表可以增删改。
菜单列表的增改页面。这是/webView/systemMgr/roleMenu_edit.html
这里写图片描述

功能列表的增改页面。/webView/systemMgr/rolePower_edit.html
这里写图片描述

先来/webView/systemMgr\roleMenu.html

<body class="easyui-layout"  style="display: none"><div data-options="region:'west',title:'菜单列表',split:true" style="width:500px;" >    <table id="box0"></table></div><div data-options="region:'center',title:'功能列表'" style="background:#eee;">    <table id="box" ></table></div><div id="tb0" >    <div>        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.addMenu(500,500,'systemMgr/roleMenu_edit.html');" id="addMenu">添加</a>-->        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="obj.editMenu(500,500,'systemMgr/roleMenu_edit.html');" id="editMenu">修改</a>-->        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="obj.removeMenu()" id="removeMenu">删除</a>-->    </div></div><div id="tb" >    <div>        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="obj.addPower(500,500,'systemMgr/rolePower_edit.html');" id="addPower">添加</a>-->        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="obj.edit(500,500,'systemMgr/rolePower_edit.html');" id="edit">修改</a>-->        <!--<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="obj.remove()" id="remove">删除</a>-->    </div></div>

 var seletMenuId;    var treeTotalData=[];    var currentParentName=''    $(function () {setTimeout(function(){    $(".easyui-layout").show();},10)//功能        function getColumn(){            var mydata={                powerId:"功能Id",                powerName:"功能名称",                icon:"图标",                powerUrl:"功能路径",                menuId:"菜单Id",                remark:"备注",                createTime:"创建时间",                disableText:"是否禁用",                sort:"排序"            }            var mydata2={                id:'M1',                powerId:"功能Id",                powerName:"功能名称",                powerUrl:"功能路径",                menuId:"菜单Id",                remark:"备注",                createTime:"创建时间",                disableText:"是否禁用"//            icon:"图标",            }            var i=0            var columnObj=[];            var option={};            var myobj            $.each(mydata,function(key,value){                myobj={"field":key,"title":value}                if(key=="icon"){                    myobj.formatter=function(value, row, index){                        return '<span class="l-btn-icon '+value+'" style="position: static!important;margin:0 0 0 0!important; " ></span>'                    }                }                if(key=='remark'){                    myobj.formatter=remarkFormater;                }                columnObj.push(myobj);                i++;            })//        option=initGrid("/power/search",'#tb')            option.checkbox=true;            option.columns=new Array(columnObj);//        option.title='菜单管理';            option.data=[mydata2];            return option;        }        //菜单        function getColumnTree(){            var mydata={                menuId:"菜单Id",                menuName:"菜单名称",                sort:"排序",                menuUrl:"菜单路径",//            parentId:"父级节点",//            leaf:"是否叶子节点",                remark:"备注",                createTime:"创建时间",                disableText:"是否禁用",                icon:"图标"            }            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:"图标"                },{                    id:'M3',                    menuId:"菜单Id2",                    menuName:"菜单名称",                    menuUrl:"菜单路径",                    parentId:"M1",                    leaf:1,                    remark:"备注",                    createTime:"创建时间",                    disable:"是否禁用状态",                    disableText:"是否禁用文字",                    icon:"图标"                }                ]            }//        treeTotalData=mydata2            var i=0            var columnObj=[];            var option;            var myobj={}            $.each(mydata,function(key,value){                myobj={"field":key,"title":value}                if(key=="menuId"){                    myobj.width=150;                }                if(key=='remark'){                    myobj.formatter=remarkFormater;                }                columnObj.push(myobj);                i++;            })            option=initGrid("/menu/search",'#tb0')            option.columns=new Array(columnObj);//        option.title='菜单管理';            option.idField='id';            option.treeField="menuId";            option.animate=true;            option.data=[mydata2];            option.onClickRow=function(row){                if(!row)return;                seletMenuId=row.menuId;                if(row.leaf==1){//                alert("dddd")                    /**                     * 菜单点击叶子节点时。功能列表显示菜单的功能。                     */                    var node = $('#box0').treegrid('getParent',seletMenuId);                    currentParentName=node.menuName;                    console.log("node",node)                    $('#box').datagrid({                        queryParams:{menuId:seletMenuId}                    });                }else{                    currentParentName=''                    $('#box').datagrid('loadData', { total: 0, rows: [] });                }            }            option.onLoadSuccess=function(row, data){                if(data){                    treeTotalData=data;                }//            treeTotalData=mydata2            }            option.onLoadError=function(data){//            alert("onLoadError")////            treeTotalData=data.rows;//            treeTotalData=mydata2            }            return option;        }        var obj=new getObj();        obj.htmlName="/power"        obj.options=getColumn();        boxDatagrid(obj.options);//   $("#box").datagrid(getColumn())        $("#box0").treegrid(getColumnTree())        obj.addPower=function(w,h,url,title){            var rows = $('#box0').datagrid('getSelections');            if (rows.length == 1&&rows[0].leaf==1) {                obj.isAdd=true;                showEditWindow(w,h,url,title);            }else{                $.messager.alert('警告', '必须先选择菜单列表的叶子节点！', 'warning');            }        }        obj.removeMenu=function(){            var rows = $('#box0').treegrid('getSelections');            if (rows.length > 0) {                $.messager.confirm('确定操作', '您正在要删除所选的记录吗？', function (flag) {                    if (flag) {                        var ids ="menuId="+rows[0].menuId;                        myAjaxTree("/menu/delById",'GET',ids,"box0")                    }                });            } else {                $.messager.alert('提示', '请选择要删除的记录！', 'info');            }        }        obj.addMenu=function(w,h,url,title){            obj.isAdd=true;            showEditWindow(w,h,url,title);        },                obj.removeMenu=function(){                    var rows = $('#box0').treegrid('getSelections');                    if (rows.length > 0) {                        $.messager.confirm('确定操作', '您正在要删除所选的记录吗？', function (flag) {                            if (flag) {                                var ids ="menuId="+rows[0].menuId;                                myAjaxTree("/menu/delById",'GET',ids,"box0")                            }                        });                    } else {                        $.messager.alert('提示', '请选择要删除的记录！', 'info');                    }                }        obj.editMenu=function(w,h,url,title){            var rows = $('#box0').treegrid('getSelections');            if (rows.length == 1) {                obj.selectItemData=rows[0];                obj.isAdd=false;                showEditWindow(w,h,url,title);            } else {                $.messager.alert('警告', '修改必须或只能选择一行！', 'warning');            }        }    });

然后/webView/systemMgr/rolePower_edit.html

<div class="container">    <div class="row">        <div class="col-sm-8 col-sm-offset-2">            <div class="page-header">                <h2>菜单管理编辑</h2>            </div>            <form id="defaultForm" class="form-horizontal">                <div class="mylist">                    <div class="form-group list">                        <label class="col-sm-3 control-label">Username</label>                        <div class="col-sm-7">                            <input type="text" class="form-control" name="username" />                        </div>                    </div>                </div>            </form>        </div>    </div></div><div class="toshow4" style="display:none" >    <div type="text"  class="form-control" name="parentId"  ></div><div id="treeview" style="display:none;"/></div><select class="form-control toshow3" style="display:none" name="leaf" >    <option value="0">否</option>    <option value="1">是</option></select><textarea rows="4" class="form-control toshow2" name="remark" style="display:none" ></textarea><select class="form-control toshow1" style="display:none" name="disable" >    <option value="0">否</option>    <option value="1">是</option></select><div class="dropdown toshow0 " name="icon" >    <button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" >        <a ><span class="iconSpan2"></span></a>        <span class="caret"></span>    </button>    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">        <li role="presentation" onclick="getIcon('null');" ><a  role="menuitem" class="iconClss "><span class="iconSpan"> null</span></a></li>        <li role="presentation" onclick="getIcon('icon-add');" ><a role="menuitem" class="icon-add iconClss" ><span class="iconSpan">icon-add</span></a></li>        <li role="presentation" onclick="getIcon('icon-search');" ><a role="menuitem" class="icon-search iconClss"><span class="iconSpan">icon-search</span></a></li>        <li role="presentation" onclick="getIcon('icon-edit');" ><a role="menuitem" class="icon-edit iconClss"><span class="iconSpan">icon-edit</span></a></li>        <li role="presentation" onclick="getIcon('icon-remove');" ><a role="menuitem" class="icon-remove iconClss"><span class="iconSpan">icon-remove</span></a></li>        <li role="presentation" onclick="getIcon('icon-reload');" ><a role="menuitem" class="icon-reload iconClss"><span class="iconSpan">icon-reload</span></a></li>    </ul></div>

function  getIcon(str){    if(str=='null'){        $("#dropdownMenu1").find("a").removeClass()            .end()            .find(".iconSpan2").text(str)    }else{    $("#dropdownMenu1").find("a").removeClass().addClass(str+"  iconClss")                .end()                .find(".iconSpan2").text(str)    }    $("#icon").val(str)}$(function(){//var formObj=getFormObj();    var formObj=getFormObjNotEmpty();    var fields={};    var data={        menuId:"菜单Id",        menuName:"菜单名称",        menuUrl:"菜单路径",        parentId:"父级节点",//        leaf:"是否叶子节点",////        createTime:"创建时间",////        disableText:"是否禁用文字",        icon:"图标",        sort:"排序",        disable:"是否禁用",        remark:"备注"    }    var valueData    if(isAdd){        valueData=data//W.obj.selectItemData//data//window.parent.obj.selectItemData;    }else{        valueData=W.obj.selectItemData//data//window.parent.obj.selectItemData;    }    var myFiledTitle=data//expentObj(data,titleArr);    showHtml();    changeDom("icon",$('.toshow0'),valueData);    changeDom("disable",$('.toshow1'),valueData);    changeDom("remark",$('.toshow2'),valueData)//    changeDom("leaf",$('.toshow3'),valueData)    getIcon(valueData["icon"])    initDomTree()    function initDomTree(){       var nodes= W.treeTotalData        if (!nodes||nodes==undefined||nodes.length==0) {            $("#parentId").parents(".list").hide();            return;        }        changeDomTree("parentId",$('.toshow4'),valueData)        function changeDomTree(box,toshow,mydata){            $('#'+box).after(toshow)            $('#'+box).detach();            toshow.show();            toshow.find("[name=parentId]").attr("id",box)            if(!isAdd){                $('#'+box).text(W.currentParentName);                $('#'+box).attr(box,mydata[box]);//                $('#'+box).html(mydata[box]);            }        }        var defaultData = [            {                text: 'parent1',                href: '#parent1',                tags: ['4'],                nodes: [                    {                        text: 'Child 1',                        href: '#child1',                        tags: ['2'],                        nodes: [                            {                                text: 'Grandchild 1',                                href: '#grandchild1',                                tags: ['0']                            },                            {                                text: 'Grandchild 2',                                href: '#grandchild2',                                tags: ['0']                            }                        ]                    },                    {                        text: 'Child 2',                        href: '#child2',                        tags: ['0']                    }                ]            }        ];        function buildDomTree() {            var data = [];            function walk(nodes, data) {                if (!nodes||nodes==undefined||nodes.length==0) { return; }                var childLen=0                $.each(nodes, function (id, node) {//"key ,value"                    var obj = {                        id: node.id,                        text:node.menuName,                        menuId:node.menuId//                    tags: [node.children.length > 0 ? node.children.length + ' child elements' : '']                    };                    if(node.children!=undefined){                        childLen=node.children.length                        if(childLen > 0){                            obj.tag=childLen                            obj.nodes = [];                            walk(node.children, obj.nodes);                        }                    }                    else{                        obj.tag=0;                    }                    data.push(obj);                });            }            walk(W.treeTotalData, data);            return data;        }        var options = {            bootstrap2: false,            showTags: true,            levels: 5,//            showCheckbox:true,            checkedIcon:"glyphicon glyphicon-check",            data: buildDomTree(),            onNodeSelected:function(event, data){                $("#parentId").val(data.text);                $("#parentId").text(data.text);                $("#parentId").attr("parentId",data.menuId);                $("#treeview").hide();            }        };        $('#treeview').treeview(options);        $("#treeview").mouseleave(function(){            $("#treeview").hide();        });        $("#parentId").click(function(){            $("#treeview").show();        });    }    myFormValidation();    function showHtml(){        var ss        var i=0;        $.each(myFiledTitle,function(key,value){            ss=$('.mylist .list:first').clone();            $(".list:eq("+i+") .control-label").html(value+":");            $(".list:eq("+i+") .form-control").attr({"id":key,"name":key})            if(!isAdd){                $(".list:eq("+i+") .form-control").val(valueData[key])                if(key=="menuId"){                    $("#"+key).attr("disabled","disabled")                }else{                    $("#"+key).removeAttr("disabled");                }            }else{                if(key=="menuId"){                    $(".list:eq("+i+")").hide();                }else{                    $(".list:eq("+i+")").show();//                    $("#"+key).removeAttr("disabled");                }            }            $('.mylist').append(ss);            fields[key]=formObj.sameAs(true)            i++;        })        $('.mylist .list:last').detach();    }    function myFormValidation(){        fields.menuName=formObj.sameAs(false)        fields.sort=formObj.sameAs(false)//        fields.remark=formObj.sameAs(true)//        fields.parentId=formObj.sameAs(true)//        fields.icon=formObj.sameAs(true)//        changeImgDom('codeImg',0);//        $('#defaultForm').formValidation({            message: '此值无效',            icon: {                valid: 'glyphicon glyphicon-ok',                invalid: 'glyphicon glyphicon-remove',                validating: 'glyphicon glyphicon-refresh'            },            locale: 'zh_CN',            fields:fields,            onSuccess:function(){                var index=layer.load(2)                var url="/menu/update"                if(isAdd){                    url="/menu/add"                }                var mydata=getFromData(data);                mydata.parentId=$("#parentId").attr("parentId")                /**                 * box0是菜单列表树的网格容器。                 */                doTreeSubmit(url,mydata,"box0")            }        })    }})

这里写图片描述

其实功能编辑和菜单编辑差不多，我就不写了。

其他公共类和easyUi的系列教程里面有。就不写了。

阅读全文

1 0