Extjs SSH 系统框架分享(修正版)

框架总体布局


//其中的角色菜单代码块
public List getRgMenuByRoleId(Integer RoleId) {
		Map<Integer, List> retMap = new HashMap();//返回菜单集
		StringBuffer rmBuffer=new StringBuffer();
		rmBuffer.append("select rm from RgMenu rm where 1=1 ");
		rmBuffer.append("and rm.id in ");
		rmBuffer.append("(select rmr.menuId from RgMenurole rmr,User u where u.role=rmr.roleId ");
		rmBuffer.append("and u.role="+RoleId+") order by rm.sort");
		try {
			List<RgMenu> rmList=super.findByHql(rmBuffer.toString());
			Set pids = new HashSet();//目录结点ID
			for (RgMenu rgMenu : rmList) {
				RgMenu rm=getRgMenuById(rgMenu.getPid());
				if (retMap.containsKey(rgMenu.getPid())) {
					List sysMenus = (List) retMap.get(rgMenu.getPid());
					sysMenus.add(rgMenu);
				} else {
					List sysMenus = new ArrayList();
					sysMenus.add(rgMenu);
					retMap.put(rgMenu.getPid(), sysMenus);
				}
				pids.add(getRgMenuById(rgMenu.getPid()));//获取系统菜单
			}

			
			//遍历菜单集合
			Map validPidMap = new HashMap();
			Iterator itor = pids.iterator();
			while (itor.hasNext()) {
				List<RgMenu> pidList=new ArrayList<RgMenu>();
				RgMenu pid = (RgMenu) itor.next();
				for (RgMenu rgMenu : rmList) {
					if(rgMenu.getPid().equals(pid.getId())){
						pidList.add(rgMenu);
					}
				}
//				//子节点菜单排序
				Collections.sort(pidList,new Comparator<RgMenu>(){
		            public int compare(RgMenu arg0, RgMenu arg1) {
		            		return arg0.getSort().compareTo(arg1.getSort());
		            }
		        });
				validPidMap.put(pid, pidList);
			}
			List<Map.Entry<RgMenu,List<RgMenu>>> mappingList = new ArrayList<Map.Entry<RgMenu,List<RgMenu>>>(validPidMap.entrySet()); ; 
			//对目录结点按sort进行排序
		    Collections.sort(mappingList, new Comparator<Map.Entry<RgMenu,List<RgMenu>>>(){
	            public int compare(Map.Entry<RgMenu,List<RgMenu>> mapping1,Map.Entry<RgMenu,List<RgMenu>> mapping2) {
	                return mapping1.getKey().getSort().compareTo(mapping2.getKey().getSort());
	            }
	        });
			return mappingList;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

//其中service层添加角色模块
public String addRole(Role role,String ids,String vals) {
		boolean flag=false;
		ArrayList al=HashStr.getHashStr(vals);
		List<Role> roleList=new ArrayList<Role>();
		List<RgMethodrole> rmrList=new ArrayList<RgMethodrole>();
		List<RgMenurole> rrList=new ArrayList<RgMenurole>();
		Map<String, Object> causeMaps = new HashMap<String, Object>();
		try {
			if(role!=null){
				SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
				role.setCreatetime(format.format(new Date()));
				Integer getRoleNo=roleDao.addAndGetId(role);
				if(getRoleNo!=null){
					if("".equals(ids)&&"".equals(vals)){
						causeMaps.put("success", true);
						causeMaps.put("message", "操作成功,未分配权限");
					}else{
						String[] idsArray=ids.split(",");
						String[] valsArray=vals.split(",");
						for (int i = 0; i < idsArray.length; i++) {
							RgMethodrole rmr=new RgMethodrole();
							rmr.setMethodId(Integer.valueOf(idsArray[i]));
							rmr.setRoleId(getRoleNo);
							rmr.setMenuId(Integer.valueOf(valsArray[i]));
							rmrList.add(rmr);
						}
						for (int i = 0; i < al.size(); i++) {
							RgMenurole rr=new RgMenurole();
							rr.setMenuId(Integer.valueOf((String) al.get(i)));
							rr.setRoleId(getRoleNo);
							rrList.add(rr);
						}
						flag=roleDao.addRole(rmrList,rrList);
						if(flag){
							causeMaps.put("success", flag);
							causeMaps.put("message", "操作成功!");
						}
					}
				}else{
					causeMaps.put("success", false);
					causeMaps.put("message", "操作失败");
				}
			}else{
				causeMaps.put("success", false);
				causeMaps.put("message", "操作失败");
			}
		} catch (Exception e) {
			causeMaps.put("success", flag);
			causeMaps.put("message", e.getMessage());
		}
		jsonString=JsonUtil.getJsonStringFromXml(causeMaps);
		return jsonString;
	}

//这个是主页Extjs菜单模块
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="org.springframework.web.context.support.*,org.springframework.context.*"%>
<%@ page import="com.work.menu.dao.*" %>
<%@ page import="java.util.Map.*" %>
<%@ page import="com.work.menu.model.*" %>
<%@ page import="com.work.user.model.*" %>
<% 
	//Map retMap=(Map)request.getSession().getAttribute("menuMap");
	List<Map.Entry<RgMenu,List<RgMenu>>> menuList=(List<Map.Entry<RgMenu,List<RgMenu>>>)request.getSession().getAttribute("menuMap");
	Integer roleId=(Integer)request.getSession().getAttribute("roleId");
%>

<script type="text/javascript">
<!--
var mainTabs,addMenuTab,item,currentItem;
Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '/work/plug/extjs/ux/');
Ext.require([
    'Ext.tab.*',
    'Ext.ux.TabCloseMenu'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
  // NOTE: This is an example showing simple state management. During development,
  // it is generally best to disable state management as dynamically-generated ids
  // can change across page loads, leading to unpredictable results.  The developer
  // should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var itemPanel=new Array();

 	<%
 		for (Iterator iterator = menuList.iterator(); iterator.hasNext();) {
			 Entry<RgMenu, List<RgMenu>> entry = (Entry<RgMenu, List<RgMenu>>) iterator.next();
			 String a_html="";
			 String title="";
		     RgMenu rmPid=(RgMenu)entry.getKey();
		     List<RgMenu> rmList = (List<RgMenu>)entry.getValue();
		     for(RgMenu rm:rmList){
		     	 a_html+="<a class='tree_links' href=javascript:addMenuTab('"+request.getContextPath()+"/"+rm.getUrl()+"?menuId="+rm.getId()+"&role="+roleId+"','"+rm.getName()+"','"+rm.getId()+"')><img src='"+request.getContextPath()+"/images/png 32/"+rm.getIco()+"' class='menu_img'/>&nbsp;&nbsp;"+rm.getName()+"</a>"; 
		     }
		    %>
		    var item<%=rmPid.getId()%>=new Ext.Panel({
				title: '<%=rmPid.getName()%>',
				html: "<%=a_html%>",
				autoScroll :true,
				iconCls: 'nav' // see the HEAD section for style used
			});
			itemPanel.push(item<%=rmPid.getId()%>);
		    <%
		} 
	%>

 var viewport = Ext.create('Ext.Viewport', {
           id: 'border-example',
           layout: 'border',
           items: [
           // create instance immediately
           Ext.create('Ext.Component', {
               region: 'north',
               contentEl: 'north',
               height: 52
           }), {
               // lazily created panel (xtype:'panel' is default)
               region: 'south',
               contentEl: 'south',
               split: true,
               height: 40,
               minSize: 100,
               maxSize: 200,
               margins: '0 0 0 0'
           }, {
               region: 'west',
               stateId: 'navigation-panel',
               id: 'west-panel', // see Ext.getCmp() below
               title: '功能导航',
               split: true,
               width: 200,
               minWidth: 175,
               maxWidth: 400,
               collapsible: true,
               animCollapse: true,
               margins: '0 0 0 5',
               layout: 'accordion',
				bbar : [{
					text : '开始',
					iconCls : 'drive_user',
					menu : new Ext.menu.Menu({
						items : [{
							text : '关于系统',
							iconCls : 'icon-information',
							handler : function() {
								new Ext.Window({
									closeAction : 'close',
									resizable : false,
									bodyStyle : 'padding: 7',
									modal : true,
									title : '关于本系统',
									html : '本系统采用目前较为流行的技术实现,<br>前台使用了ExtJs技术,所以实现了跨浏览器<br>' +
											'本程序在IE6,IE7,FireFox3均测试通过!<br><br>主要技术: Struts2 + Spring2.5 + iBatis2.3 + ExtJs2.2<br><br>'
											+ '数&nbsp;&nbsp;据&nbsp;&nbsp;库: MySql',
									width : 300,
									height : 200
								}).show();
							}
						}, {
							text : '退出系统',
							iconCls : 'user_delete',
							handler : function() {
								Ext.Msg.confirm('操作提示', '您确定要退出本系统?', function(btn) {
									if ('yes' == btn) {
										Ext.Ajax.request({
											url : 'logOutUser.action',
											success : function() {
												location = '/work/login.jsp';
											},
											failure : function() {
												Ext.Msg.show({
													title : '错误提示',
													msg : '退出系统失败!',
													icon : Ext.Msg.ERROR,
													buttons : Ext.Msg.OK
												});
											}
										});
									}
								});
							}
						}]
					})
				}],
               layoutConfig: {
			        // layout-specific configs go here
			        titleCollapse: false,
			        animate: true,
			        activeOnTop: true
			    },
               items: [itemPanel]
           },
           // in this instance the TabPanel is not wrapped by another panel
           // since no title is needed, this Panel is added directly
           // as a Container
           mainTabs=Ext.create('Ext.tab.Panel', {
               region: 'center', // a center region is ALWAYS required for border layout
               deferredRender: false,
               resizeTabs: true,
               activeTab: 0,     // first tab initially active
               enableTabScroll: true,
               resizeTabs: true ,
               defaults: {
		            autoScroll:true,
		            bodyPadding: 2
		        },
               items: [{
                   contentEl: 'center',
                   title: '个人桌面',
                   iconCls: 'destop',
                   closable: false,
                   html: '<iframe frameBorder=0 id="body_content_frame" name="body_content_frame" src="'+contextPath+'/base/main_content.jsp" width="100%"  height="100%" scrolling="no"></iframe>',
                   autoScroll: true,
                   scripts:true
               }],
              plugins: Ext.create('Ext.ux.TabCloseMenu', {
                closeTabText: '关闭标签页',
               	closeOthersTabsText: '关闭其他标签页',
               	closeAllTabsText: '关闭所有标签页',
	            extraItemsTail: [
	                '-',
	                {
	                    text: 'Closable',
	                    checked: true,
	                    hideOnClick: true,
	                    handler: function (item) {
	                        currentItem.tab.setClosable(item.checked);
	                    }
	                }, '-',
	                {
	                    text: 'Disabled',
	                    checked: true,
	                    hideOnClick: true,
	                    handler: function (item) {
	                        currentItem.tab.setDisabled(item.checked?true:false);
	                    }
	                }
	            ],
	            listeners: {
	                aftermenu: function () {
	                    currentItem = null;
	                },
	                beforemenu: function (menu, item) {
	                    var menuitem = menu.child('*[text="Closable"]');
	                    currentItem = item;
	                    menuitem.setChecked(item.closable);
	                }
	            }
	        })
           })]
       });
  		//通过菜单增加操作面版
	addMenuTab=function(url,tt,menuFormId){
	    var addTabPanel = mainTabs.getComponent(tt);
	    if(!addTabPanel){
		    mainTabs.add({
	            title: tt,
	           // iconCls: 'tabs',
	            id:tt,
	            forceFit : true,
	            autoWidth:true,
	            html: '<iframe frameBorder=0 id="iframe'+menuFormId+'" name="body_content_frame" src="'+url+'" width="100%"  height="100%" scrolling="no"></iframe>',
	            closable:true
	        }).show();
	    }else{
	    	mainTabs.setActiveTab(addTabPanel);
	    }
	 }//角色管理模块脚本菜单
Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '/work/plug/extjs/ux/');

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.ux.ProgressBarPager',
    'Ext.form.*',
    'Ext.selection.CheckboxModel'
]);

var win,form,grid,role_store,store;
Ext.onReady(function() {
    Ext.QuickTips.init();

	role_store=Ext.create('Ext.data.Store', {
		        fields: [
		           {name: 'menuName'},
		           {name: 'methodResult'}
		        ],	
		        remoteSort: true,
				proxy:new Ext.data.HttpProxy({
					url:'getRgMethodInfo.action',
				    reader: {
		                root: 'Rows',
		                totalProperty: 'Total'
		            }
				}),
				autoLoad:false
		 })

   form = Ext.widget('form', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            border: false,
            bodyPadding: 10,

            fieldDefaults: {
                labelAlign: 'top',
                labelWidth: 100,
                labelStyle: 'font-weight:bold'
            },
            defaults: {
                margins: '0 0 10 0'
            },

            items: [  {
                xtype: 'fieldset',
                title: '角色配置',
                defaultType: 'textfield',
                layout: 'anchor',
                columnWidth: 0.5,
                disableSelection: false,//值为TRUE,表示禁止选择行
                defaults: {
                    anchor: '50%'
                },
                items: [{
	                xtype: 'textfield',
	                fieldLabel: '角色名称',
	                name:'name',
	                 labelAlign: 'left',
	                blankText:'角色名称不能为空',
	                allowBlank: false
	            }, {
                    xtype: 'combobox',
                    fieldLabel: '是否启用',
                    name: 'type',
                     labelAlign: 'left',
                    blankText:'启用不能为空',
                    store: Ext.create('Ext.data.ArrayStore', {
                        fields: ['type', 'typeField'],
                        data : [['1', '启用'], ['2', '冻结']]
                    }),
                    valueField: 'type',
                    displayField: 'typeField',
                    typeAhead: true,
                    queryMode: 'local',
                    emptyText: 'Select a flag...',
                    allowBlank: false,
                    forceSelection: true
                }, {
		            xtype: 'textareafield',
		             labelAlign: 'left',
		            name: 'remark',
		            fieldLabel: '备注'
		        }]
            },{
                xtype: 'fieldset',
                title: '操作分配',
                defaultType: 'textfield',
                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
                items:
                	Ext.create('Ext.grid.Panel', {
                	id:'methodGrid',
			    	store: role_store,
			        stateful: true,
			        loadMask: true,
			        stateId: 'roleGrid',
			        columns: [
			        	 Ext.create('Ext.grid.RowNumberer'),
			            {
			                text     : '菜单信息',
			                flex: 1,
			                sortable : true,
			                align:'center',
			                dataIndex: 'menuName'
			            },
			            {
			                text     : '操作信息',
			                flex: 2,
			                sortable : true,
			                align:'left',
			                dataIndex: 'methodResult'
			        	}
			        ],
			        columnLines: true,
			        height:320 ,
			        width: 'auto',
			        viewConfig: {
			            stripeRows: true
			        },
			        tbar : [{  id : 'checkAll',
		                       text : '全选',
		                       tooltip : '对操作信息全选',
		                       iconCls : 'settings',
		                       onClick : function() {
		                            // update form to insert form
		                        	checkAll();
		                            //form.getForm().reset();
	                       }},{  id : 'uncheckAll',
		                       text : '反选',
		                       tooltip : '对操作信息反选',
		                       iconCls : 'settings',
		                       onClick : function() {
		                            // update form to insert form
		                        	uncheckAll();
		                            //form.getForm().reset();
	                       }}]
			    })
            }],

            buttons: [{
                text: '取消',
                handler: function() {
                    this.up('form').getForm().reset();
                    this.up('window').hide();
                }
            }, {
                text: '保存',
                handler: function() {
            		saveSystem();
                }
            }]
        });
    win = Ext.widget('window', {
        title: '角色信息窗口',
        closeAction: 'hide',
        width: 700,
        height: 620,
        minHeight: 400,
        layout: 'fit',
        resizable: true,
        modal: true,
        items: form
    });
    
    // setup the state provider, all state information will be saved to a cookie
//    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function flagChange(val) {
        if (val == 1) {
            return '<span style="color:green;">启用</span>';
        } else{
            return '<span style="color:red;">冻结</span>';
        }
        return val;
    }
    // create the data store
 	store = Ext.create('Ext.data.Store', {
        fields: [
           {name: 'id'},
           {name: 'name'},
           {name: 'type'},
            {name: 'remark'},
             {name: 'createtime'}
        ],	
        remoteSort: true,
		proxy:new Ext.data.HttpProxy({
			url:'getRoleForList.action',
		    reader: {
                root: 'rows',
                totalProperty: 'totalCount'
            }
		})
    });

    store.load({params : {page : 1,limit : 23}});
    
    
    //create the checkbox
    var sm = Ext.create('Ext.selection.CheckboxModel');
    
    // create the Grid
    grid = Ext.create('Ext.grid.Panel', {
    	store: store,
        stateful: true,
        loadMask: true,
        region : 'center',
        stateId: 'stateGrid',
        selModel: sm,
        columns: [
        	  Ext.create('Ext.grid.RowNumberer'),
            {
                text     : '名称',
                sortable : true,
                align:'center',
                dataIndex: 'name'
            },
            {
                text     : '备注',
                 flex: 1,
                width:342,
                sortable : true,
                align:'center',
                dataIndex: 'remark'
        	},
            {
                text     : '是否启用',
                sortable : true,
                renderer : flagChange,
                align:'center',
                dataIndex: 'type'
        	},
            {
                text     : '创建时间',
                width:142,
                sortable : true,
                align:'center',
                dataIndex: 'createtime'
        	}
        ],
        columnLines: true,
        iconCls:'icon-grid',
        height:650,
        width: 'auto',
        title: '角色信息',
        renderTo: 'grid-role',
        viewConfig: {
            stripeRows: true
        },
        bbar: Ext.create('Ext.PagingToolbar', {
            dock: 'bottom',
            pageSize: 23,
            store:  store,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.ProgressBarPager', {})
        })
    });

});

function add(){
	$('#roleId').val('');
	role_store.load({ params: { operate:'save'} });
    win.show();
}
function modify(){
	var record = grid.getSelectionModel().getSelection();
	if(record.length==0){
		Ext.MessageBox.alert('提示', '请先选择数据!');
	}else if(record.length>1){
		Ext.MessageBox.alert('提示', '请选择一行数据!');
	}else{
		$('#roleId').val(record[0].get("id"));
		form.getForm().findField("name").setValue(record[0].get("name"));
		form.getForm().findField("type").setValue(record[0].get("type"));
		form.getForm().findField("remark").setValue(record[0].get("remark"));
		role_store.load({ params: { operate:'modify','rm.roleId':record[0].get("id")} });
   	    win.show();
	}
}
//保存信息
function saveSystem(){
	if (form.getForm().isValid()) {
        var values = form.getForm().getValues();
        var roleId=$('#roleId').val();
        var name=values.name;
		var type=values.type;
		var remark=values.remark;
		var idsArray = new Array();
		var valArray = new Array();
	    $("#methodGrid input:checkbox:checked").each(function () {
	         idsArray.push(this.id);
	         valArray.push(this.value);
	    });
	    var ids = idsArray.join(',');//操作数组
	    var vals = valArray.join(',');//菜单数组
		$.ajax({
			 type:'post',
			 cache: false,
			 async: false,
			 url:roleId==''?'addRole.action':'modifyRole.action',
			 data:{'role.id':roleId,'role.remark':remark,'role.name':trim(name),'role.type':type,'ids':ids,'vals':vals},
			 success:function(data){
				 if(data.success){
					 Ext.MessageBox.alert('提示', data.message);
				 }else{
				 	 Ext.MessageBox.alert('提示', data.message);
				 }
			 }
		 });
        form.getForm().reset();
        win.hide();
        store.load();
    }
} //删除
function remove(){
	var row = grid.getSelectionModel().getSelection();
	var obj = new Array();
	if (row.length>0){
		for(var i=0;i<row.length;i++){
			obj.push(row[i].data);
		}
    	$.ajax({
		 type:'post',
		 cache: false,
		 async: false,
		 url:'removeRole.action',
		 data:{'rows':$.toJSON(obj)},
		 success:function(data){
			 if(data.success){
				 Ext.MessageBox.alert('提示', data.message);
			 }else{
			 	 Ext.MessageBox.alert('提示', data.message);
			 }
			 store.load();
		 }
	 });
    }else{
    	 Ext.MessageBox.alert('提示', '请选择行!');
    }
}	

//全选
function checkAll(){
	 $("#methodGrid input:checkbox").each(function () {
		 if($(this).attr("disabled")){
			 
		 }else{
			 $(this).attr("checked", true);
		 }
	 });
}
//反选
function uncheckAll(){
	 $("#methodGrid input:checkbox").each(function () {
		 $(this).attr("checked", false);
	 });
}

});
//-->
</script>
 <div id="west" class="x-hide-display">
   </div>

新界面

新下载地址:http://115.com/file/e7se45b4

新下载地址:http://115.com/file/e7se45b4

转载于:https://my.oschina.net/544620994/blog/41113

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值