Ext2.0+SSH做的角色管理模块

Web开发 专栏收录该内容
14 篇文章 0 订阅

第一次使用Extjs,一切都是新的,大概折腾了一个星期,总算做出了一个角色管理模块,可以方便的分配菜单权限和单位权限,在此分享一下。



以上是两种效果图,第一张角色管理页面,点击角色列表中的“单位权限”,弹出第二个页面,在第二个页面中选中需要分配给改角色的单位,点击“提交”即可。下面结合代码简要说明一下:
Java后台中action中的方法:

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class RoleManageAction extends BaseAction<RoleManageBean> {
    private RoleManageService roleManageService;
    public void setRoleManageService(RoleManageService roleManageService) {
        this.roleManageService = roleManageService;
    }
    public String doFind() throws IOException {
        UserBean user = (UserBean)session.get("user");
        List<Role> list = roleManageService.findRole(entity, user); // 此处是查询角色列表
        JSONObject json = new JSONObject();
        json.put("total", list.size());
        int exptCount=start+ limit;// start和limit是定义在BaseAction的变量,对应于页面上的start和limit,用于翻页
        if(list.size()<exptCount){
            exptCount=list.size();
        }
        json.put("items", list.subList(start, exptCount));
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setContentType("text/html");
        response.setDateHeader("Expires", 0);
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json.toString());
        return null;
    } 
    public String addRole() throws IOException{...}
    public String updateRole() throws IOException{...}
    public String deleteRole() throws IOException{...}
    /**
     * 根据当前用户显示学校、年级、班级列表
     */
    public String showSchool() throws IOException{
        UserBean user = (UserBean)session.get("user");
        String roleID = request.getParameter("roleID");
        List<CheckBoxEntityBean> list = roleManageService.showSchool(user, roleID);
        JSONArray jo = JSONArray.fromObject(list);
        
        response = initHeader(response);
        response.getWriter().write(jo.toString());
        return null;
    }
    /**
     * 维护角色单位(学校、年级、班级)权限
     */
    public String manageSchool() throws IOException{
        String schIds = request.getParameter("menuIds");
        String roleID = request.getParameter("roleID");
        
        roleManageService.manageSchool(roleID, schIds);
        JSONObject json = new JSONObject();
        json.put("success", true);
        response.getWriter().write(json.toString());
        return null;
    }
}
下面是构造树形结构的一个javabean,将学校、年级、班级信息装载进改类中,以便在页面显示,这个过程是简单的数据库查询及赋值的过程,此处不再赘述

public class CheckBoxEntityBean{

    /** id */
    private String id;

    /** 显示内容 */
    private String text;
    
    /** 是否叶子节点 */
    private boolean leaf;
    
    /** 父节点 */
    private String p_id;
    
    /** 是否选中 */
    private boolean checked; / 在Ext中创建带选择框的TreePanel,就加这一项: checked:false或者checked:true
    
    /** 子节点 */
    private List<CheckBoxEntityBean> children;

    // getter() and setter()
}
下面是js代码:

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL ='/CIIP/Extjs/resources/images/default/s.gif'; // 
    var findForm=new Ext.FormPanel({
        labelSeparator : ":",
        frame:true,
        id:"findForm",
        renderTo:"find",
        border:false,
        items : [
            {
                xtype:'textfield',
                width : 200,
                name : 'roleName',
                fieldLabel:'角色名称'
            }
        ],
        buttons:[
                    {
                        text : '查询',
                        handler : function(){
                        submitFindForm();
                        }
                    },{
                        text : '关闭',
                        handler : function(){
                            findWin.hide();
                        }
                    }
                ]
    });
    var store = new Ext.data.Store({
        url:'/CIIP/roleManageAction!doFind.action',
        storeId:'searchResult',
        reader: new Ext.data.JsonReader({
            totalProperty: 'total',
            root: 'items',
            fields : [
                {
                    name : 'roleName',
                    type : 'string'
                }, 'level','id']
        })
    });
    store.on("beforeload",function(){
        var new_params = Ext.getCmp("findForm").getForm().getValues();
        Ext.apply(this.baseParams, new_params);
    });
    function submitFindForm(){
        store.reload();
    }
    //创建工具栏组件
    var toolbar = new Ext.Toolbar([
        {text : '添加',iconCls:'add',handler:showAdd},
        {text : '修改',iconCls:'option',handler:showModify},
        {text : '删除',iconCls:'remove',handler:showDelete},
        {text : '查询条件',iconCls:'piic-search',handler:showFind}
    ]);
    
    var sm = new Ext.grid.CheckboxSelectionModel();// 多选行   
    var cm = new Ext.grid.ColumnModel([
         sm,
        {header:'角色名称',width:20,dataIndex:'roleName'},
        {header:'单位权限',width:20,dataIndex:'',renderer:function(value, cellmeta, record){return "<a href='#' οnclick='openSchWin("+record.data['id']+")'>单位权限...</>"}},  // 此处是在页面查询列表中增加一个超链接,js方法openSchWin(id)定义在Ext.onReady()方法之外,点击该超链接,弹出如上面第二个图的内容
        {header:'菜单权限',width:20,dataIndex:'',renderer:function(value, cellmeta, record){return "<a href='#' οnclick='openMenuWin("+record.data['id']+")'>菜单权限...</>"}},
        {header:'id',width:20,dataIndex:'id',hidden:true}
    ]);
    cm.defaultSortable = true;
    var grid = new Ext.grid.GridPanel({
        ds: store,
        cm: cm,
        sm:sm,
        el : 'demo',
        frame:true,
        trackMouseOver: true,
        loadMask: {msg:'正在加载数据,请稍侯……'},
        viewConfig: {
            forceFit: true,
            autoFill : true
        },
        stripeRows: true, //斑马线
        autoScroll : true,
        height :parent.Ext.get("mainIframe").getHeight(),
        width : parent.Ext.get("mainIframe").getWidth(),
        tbar:toolbar,
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录,共 {2} 条',
            emptyMsg: "无记录"
        })
    });
    grid.render();
    store.load({params:{start:0,limit:20}});
    
    /*************************form表单************************/
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
    var bookForm = new Ext.FormPanel({
        labelSeparator : ":",
        frame:true,
        border:false,
        items : [
            {
                xtype:'textfield',
                width : 200,
                allowBlank : false,
                blankText : '角色名不能为空',
                name : 'roleName',
                fieldLabel:'角色名',
                maxLength:25
            },{
                xtype:'hidden',
                name : 'id'
            }
        ],
        buttons:[
            {
                text : '提交',
                handler : function(){
                    submitForm();
                }
            },{
                text : '关闭',
                handler : function(){
                    win.hide();
                }
            }
        ]
    });
       //创建弹出窗口,添加和修改角色的窗口
    var win = new Ext.Window({
        layout:'fit',
        width:380,
        closeAction:'hide',
        height:120,
        resizable : false,
        shadow : true,
        modal :true,
        closable:true,
        autoScroll:true,
        bodyStyle:'padding:5 5 5 5',
        animCollapse:true,
        items:[bookForm]
    });
    var findWin=new Ext.Window({
         layout:'fit',
         plain: true,    
         width:380,
         closeAction:'hide',
         height:120,
         resizable : false,
         autoScroll:true,
         items:[findForm]
    });
    function showFind(){
        findWin.setTitle("查询");
        findWin.show(this);
    }
    function showAdd(){
        bookForm.form.reset();
        bookForm.isAdd = true;
        win.setTitle("添加");
        win.show(this);
    }
    function showModify(){
        var ids = getCheckIdList();
        var num = ids.length;
        if(num > 1){
            Ext.MessageBox.alert("提示","每次只能修改一条信息。")
        }else if(num == 1){
            bookForm.form.reset();
            bookForm.isAdd = false;
            win.setTitle("修改");
            win.show();
            var userID = ids[0];
            loadForm(userID);
        }
    }
    function loadForm(userID){
        bookForm.form.load({
            waitMsg : '正在加载数据请稍候',//提示信息
            waitTitle : '提示',//标题
            url : 'roleManageAction!findRole.action',//请求的url地址
            params : {userID:userID},
            method:'POST',//请求方式
            success:function(form,action){//加载成功的处理函数
                //Ext.Msg.alert('提示','数据加载成功');
            },
            failure:function(form,action){//加载失败的处理函数
                Ext.Msg.alert('提示','数据加载失败');
            }
        });
    }
    //提交表单数据
    function submitForm(){
        if(bookForm.isAdd){
            bookForm.form.submit({
                clientValidation:true,//进行客户端验证
                waitMsg : '正在提交数据请稍候',//提示信息
                waitTitle : '提示',//标题
                url : 'roleManageAction!addRole.action',//请求的url地址
                method:'POST',//请求方式
                success:function(form,action){//加载成功的处理函数
                    win.hide();
                    store.reload();
                    Ext.Msg.alert('提示','添加角色成功');
                },
                failure:function(form,action){//加载失败的处理函数
                    if (action.result) {
                        Ext.Msg.alert('提示', '添加角色失败!' + action.result.message); // 此处是拿出从后台传过来的一些信息
                    } else {
                        Ext.Msg.alert('提示', '添加角色失败!');
                    }
                }
            });
        }else{
            bookForm.form.submit({
                clientValidation:true,//进行客户端验证
                waitMsg : '正在提交数据请稍候',//提示信息
                waitTitle : '提示',//标题
                url : 'roleManageAction!updateRole.action',//请求的url地址
                method:'POST',//请求方式
                success:function(form,action){//加载成功的处理函数
                    win.hide();
                    store.reload();
                    Ext.Msg.alert('提示','修改角色成功');
                },
                failure:function(form,action){//加载失败的处理函数
                    if (action.result) {
                        Ext.Msg.alert('提示', '修改角色失败!' + action.result.message);
                    } else {
                        Ext.Msg.alert('提示', '修改角色失败!');
                    }
                }
            });
        }
    }
    function showDelete(){
        var ids = getCheckIdList();
        var num = ids.length;
        if(num == 0){
            return;
        }
        Ext.MessageBox.confirm("提示","您确定要删除所选信息吗?",function(btnId){
            if(btnId == 'yes'){
                deleteUser(ids);
            }
        })
    }
    function deleteUser(ids){
        var roleIds = ids.join(',');
        var msgTip = Ext.MessageBox.show({
            title:'提示',
            width : 250,
            msg:'正在信息请稍候......'
        });
        Ext.Ajax.request({
            url : 'roleManageAction!deleteRole.action',
            params : {roleIds : roleIds},
            method : 'POST',
            success : function(response,options){
                msgTip.hide();
                var result = Ext.util.JSON.decode(response.responseText);
                if(result.success){
                    store.reload();
                    Ext.Msg.alert('提示','删除信息成功!');
                }else{
                    Ext.Msg.alert('提示','删除信息失败!\n' + result.message);
                }
            },
            failure : function(response,options){
                msgTip.hide();
                Ext.Msg.alert('提示','删除信息请求失败!');
            }
        });
    }
    function getCheckIdList(){
        var recs = grid.getSelectionModel().getSelections();
        var list = [];
        if(recs.length == 0){
            Ext.MessageBox.alert('提示','请选择要进行操作的信息!');
        }else{
            for(var i = 0 ; i < recs.length ; i++){
                var rec = recs[i];
                list.push(rec.get('id'))
            }
        }
        return list;
    }
    window.οnresize=function(){
        grid.setHeight(parent.Ext.get("mainIframe").getHeight());
        grid.setWidth(parent.Ext.get("mainIframe").getWidth());
    }
});
//以上是一个正常的增删改查页面的所有js代码,下面则是本文的重点,也就是实现上面第二张图所展示内容的js代码:

//这个方法是选择父节点,自动选中所有的子节点
function selChild(node,checked){
    //checked?node.expand():node.collapse();
    node.expand();
    if(node.hasChildNodes()){
        node.attributes.checked=checked;
        node.eachChild(function(child) {
            child.attributes.checked = checked;
            var cb = child.ui.checkbox;
            if(cb) cb.checked = checked;
                selChild(child,checked);
            });
        }
    }
//这个方法是选择子节点,自动选中父节点的父节点
function selParent(node,checked){
    if(checked){
        node.expand();
        var parentNode = node.parentNode;
        if(parentNode!=undefined){
            parentNode.attributes.checked = checked;
            var cb = parentNode.ui.checkbox;
            if(cb) cb.checked = checked;
                selParent(parentNode,checked);
            }
        }
    }

function openSchWin(id){

    ///单位权限管理
    var schTbar = new Ext.Toolbar({
        items:[
            new Ext.Button({text:'提交',buttonAlign:'center',handler:function(btn){
                var i = 0, j = 0, k = 0;
                var rootNode = school.root;
                var str = '{"ArrayNodes":[';
                rootNode.eachChild(function(schoolNode) {
                    if (schoolNode.attributes.checked) {
                        if (i > 0) {
                            str = str + ',{"schID":"'+schoolNode.id+'","children":[';
                        } else {
                            str = str + '{"schID":"'+schoolNode.id+'","children":[';
                        }
                        schoolNode.eachChild(function(gradeNode) {
                            if (gradeNode.attributes.checked) {
                                if (j > 0) {
                                    str = str + ',{"gradeID":"'+gradeNode.id+'","children":[';
                                } else {
                                    str = str + '{"gradeID":"'+gradeNode.id+'","children":[';
                                }
                                gradeNode.eachChild(function(classNode) {
                                    if (classNode.attributes.checked) {
                                        if (k > 0) {
                                            str = str + ',{"classID":"'+classNode.id+'","children":[]}';
                                        } else {
                                            str = str + '{"classID":"'+classNode.id+'","children":[]}';
                                        }
                                        k++;
                                    }
                                    
                                });
                                k = 0;
                                str = str + ']}';
                                j++;
                            }
                        });
                        j = 0;
                        str = str + ']}';
                        i++;
                    }
                });
                str = str + ']}';
                var records = school.getChecked(),
                    ids = [];
                Ext.each(records, function(rec){
                    ids.push(rec.id);
                });
                
                var msgTip = Ext.MessageBox.show({
                    title:'提示',
                    width : 250,
                    msg:'正在提交信息请稍候......'
                });
                Ext.Ajax.request({
                    url : 'roleManageAction!manageSchool.action',
                    params : {menuIds : str, roleID : id},
                    method : 'POST',
                    success : function(response,options){
                        msgTip.hide();
                        var result = Ext.util.JSON.decode(response.responseText);
                        if(result.success){
                            //store.reload();
                            Ext.Msg.alert('提示','提交信息成功。');
                        }else{
                            Ext.Msg.alert('提示','提交信息失败!');
                        }
                    },
                    failure : function(response,options){
                        msgTip.hide();
                        Ext.Msg.alert('提示','提交信息请求失败!');
                    }
                });
            }}),
            new Ext.Button({text:'关闭',buttonAlign:'center',handler:function(btn){schWin.hide();}})
        ]
    });

    var school = new Ext.tree.TreePanel({
        border : false,
        autoScroll:true,
        root : new Ext.tree.AsyncTreeNode({
            id:"root",
            text : '组织机构',
            checked : false,//此字段表示有复选框的树,false表示复选框未选中
            expanded : true//默认展开根节点
            
        }),
        hrefTarget : 'mainIframe',
        loader: new Ext.tree.TreeLoader({   
            dataUrl:"/CIIP/roleManageAction!showSchool.action?roleID="+id // 获取树节点的地址  
        }),
        bbar:schTbar,
        listeners : {
            'render':function(){this.bbar.dom.align='center';}        
        }
    });

    school.on('checkchange',function(node,checked){
        selChild(node,checked);
        selParent(node,checked);
    },school);
    var schWin = new Ext.Window({
        layout:'fit',
        width:380,
        closeAction:'hide',
        height:460,
        resizable : false,
        shadow : true,
        modal :true,
        closable:true,
        autoScroll:true,
        bodyStyle:'padding:5 5 5 5',
        animCollapse:true,
        items:[school]
    });
    schWin.show();
}
以上主要是实现“单位权限...”分配的代码,实现“功能菜单...”分配的代码类似,此处不再贴出。第一次使用extjs,感觉还是很别扭,很多东西不知从何入手,百度谷歌了n久总算做出这么一个小功能,虽然简单,但是角色分配是个常用的功能,贴出来以便以后使用或者参照。




  • 0
    点赞
  • 2
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

wymaweiyue

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值