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

第一次使用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='#' onclick='openSchWin("+record.data['id']+")'>单位权限...</>"}},  // 此处是在页面查询列表中增加一个超链接，js方法openSchWin(id)定义在Ext.onReady()方法之外，点击该超链接，弹出如上面第二个图的内容        {header:'菜单权限',width:20,dataIndex:'',renderer:function(value, cellmeta, record){return "<a href='#' onclick='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.onresize=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久总算做出这么一个小功能，虽然简单，但是角色分配是个常用的功能，贴出来以便以后使用或者参照。