easyUI 权限管理之菜单管理

最新推荐文章于 2024-05-23 18:21:10 发布
最新推荐文章于 2024-05-23 18:21:10 发布
阅读量7k 收藏 5
点赞数 2
分类专栏： html5 easyui 文章标签： easyui html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012123026/article/details/73105703
版权

这是/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
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于SSM-EasyUI的权限管理系统，细颗粒度到按钮级别
04-25
1）用户的增删改查 项目中用到了springmvc的拦截器，只有登录才能操作 主管理员账号admin 密码admin 为方便起见，数据库密码未加密 2）角色的增删改查和授权 实现页面菜单的权限用的是easyui的tree。按钮级别的权限用的是自定义的JSP标签 3）页面菜单的管理 在添加或者修改菜单的时候增加了选择图标的功能 4）操作日志的记录和备份 采用的方法是利用aop拦截add,update方法来实现操作记录。 同时用了corn表达式来实现自动备份。
easyui后台管理系统（菜单权限，按钮权限）
12-10
easyui后台管理系统，包括菜单权限，按钮权限，后台使用springMVC+hibernate，mysql数据库，jsp
easyui 角色管理菜单
yqj234的专栏
08-18 304
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>角色和权限管理</title> <link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.3.3/themes/default/easyui.css"></link> <link rel="stylesh.
使用easyui的tree组件实现给角色快捷分配权限功能
沐雨橙风ιε的博客
07-29 1247
使用easyui的tree组件实现给角色快捷分配权限功能
用户如何实现菜单权限控制
最新发布
weixin_42917779的博客
05-23 1105
1.数据库表设计 1.1菜单权限控制涉及到的表： 1.用户表：t_user(主要字段：user_id、user_name) 2.角色表：t_role(主要字段：role_id、role_name) 3.用户角色表：t_user_role(主要字段：user_id、role_id) #一对多 4.角色菜单表：t_role_menu（主要字段:role_id、menu_id）#一对多 #菜单id、菜单名称、菜单级别(一级、二级、三级)、菜单父类id、菜单url 5.菜单表:
jquery 权限控制菜单
CBlUE2014
06-19 2728
要实现的效果： 1、父节点选中，则下面的子节点全选中 2、父节点不选中，则下面的子节点全不选中 3、子节点只要选中了一个，则父节点选中 4、子节点全不选中，则父亲节点不选中 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSer
权限管理 EasyUI
09-04
这个程序是一个利用 EasyUI 和 C# 开发的简单应用，专注于权限管理，旨在实现通用的用户角色权限分配功能。在本文中，我们将深入探讨 EasyUI 在权限管理中的应用，以及如何与后端 C# 代码进行交互。 1. **EasyUI ...
ssm easyui 权限后台管理系统
01-29
SSM EasyUI 权限后台管理系统是一款基于Struts2、Spring和MyBatis三大主流Java Web框架构建的高效、易用的权限管理平台。EasyUI则是一个轻量级的前端框架，提供了丰富的组件和便捷的API，使得界面设计更加美观且操作...
easyui权限管理
12-09
EasyUI权限管理是一种基于JavaScript和CSS的前端框架EasyUI实现的用户权限控制系统。EasyUI是一个轻量级的、易于使用的组件库，它基于jQuery，提供了丰富的界面组件，如表格、下拉框、对话框、菜单等，用于快速构建...
java后台实现easyui的权限管理系统
10-15
在EasyUI的权限管理系统中，权限可能关联到具体的功能模块或菜单项。 3. **用户（User）**：用户是系统的实际操作者，每个用户可以被分配一个或多个角色。系统通过角色来控制用户对资源的访问权限。 4. **菜单...
关于easyui的权限，不同的用户登录显示不同的显示不同的树（菜单栏）
desert568的博客
12-28 7914
有关easyui中的权限--就是不同的用户登录之后你左边的菜单才会显示出不同菜单栏，这里和大家简单说一下思路： 下面是我的数据库设计：我分为三张表： 用户表  角色表  权限表 还有就是关系表（我画了一个简单的图）、 1.数据库创建: 然后如图（数据库我用的是mysql，然后用hibernate）可以知道我的用户表 和 角色表 是多对多的关系，角色表和权限表也是多对多的关系，表分别就是它们
SpringMVC+MyBatis+EasyUI(Jquery)的权限控制案例
12-04
采用SpringMVC+Mybatis等主流框架 前端：使用Jquery和Easyui技术.JS封装简洁，操作简单。案例包含了用户、角色、模块等增删改查及分页，给角色设置权限后，用属于这个角色的用户登录即可。Easyui界面简洁美观，代码简单，有一点java基础的都可看。
easyui基本权限管理系统
02-20
easyui基本权限管理系统
jquery多级菜单复杂权限设置系统
09-07
jquery实现的漂亮多级菜单 ，另带复杂权限设置模块 （自带数据库）
EasyUI动态生成菜单
weixin_30241919的博客
05-22 529
　　业务需求：不同角色有不同的权限，我们根据角色加载页面时展示不同的菜单。在easyUI中，菜单一般采用手风琴accordion组件进行展示，一级菜单下可以加载二级菜单，效果如下： 　　普通用户看到的菜： 　　管理员看到的菜单： 　　点击二级菜单后将在右边添加一个tab页，支持多个tab页同时展示： 　　接下来看实现： 　　html我们把各种角色都需要展...
四、使用Easyui后台管理框架搭建
qixiang_chen的博客
12-29 2254
参考Easyui Layout控件，绘制主工作页面 https://blog.csdn.net/qixiang_chen/article/details/83145145 页面原型 &amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&
基础权限管理
weixin_34116110的博客
08-10 144
一直想做一个基础权限管理的框架可以方便的用在管理系统里面，不需要太复杂，只要有基础的功能即可，平时比较懒，就一直从去年拖到了现在，好在马马虎虎的算是做完基本功能了，至于代码方面嘛，还有很多不尽人意的地方，bug也留了不少，做的不好 算是抛砖引玉。话不多说，先上图 首先是登录后的首页，左侧导航菜单上根据用户角色自动生成的 导航菜单界面，便于管理系统中的菜单 权限管理是指菜单页面中可能用...
jquery easy ui 1.5最新版本 简单的权限分配
AllureLove2580的专栏
10-26 4316
jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配                  首先，我先说明下，我只是一个菜鸟，我只是在编程道路上摸索的一个的小码农。做开发三年了，这好像是我第一次写博客。以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架。所以用easy ui感觉很快能上手。都是基于jquery 的ui框架。好，
easyui 权限管理系统
08-21
EasyUI权限管理系统是一种基于EasyUI框架开发的用于实现权限管理功能的系统。该系统主要用于管理用户对系统中各项功能和资源的访问权限，并通过EasyUI框架提供的丰富的界面组件和交互效果，使用户能够方便地进行权限...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值