easyUI 权限管理之菜单管理

这是/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的系列教程里面有。就不写了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值