Extjs3.0角色权限管理系统-菜单列表模块篇

于 2017-11-17 23:16:13 发布
阅读量668 收藏 1
点赞数 1
分类专栏： ExtJs 3.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014642153/article/details/78566082
版权

1.菜单列表功能模块效果图如下


菜单列表模块jsp代码

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<%@ include file="/resource/include/meta.jsp"%>
  <head>
    <title>菜单列表</title>
    <!-- 树形Grid -->
	<script type="text/javascript" src="${ctx}/resource/common/ext3/ux/maximgb/TreeGrid.js"></script>
	<script type="text/javascript" src="${ctx}/resource/common/js/sysManage/sysMenuTreeTable.js"></script>
  </head>
  <body>
  </body>
</html>

菜单列表模块js代码

/********************************************Ext入口函数，相当于java中的主函数开始********************************************/
Ext.onReady(function() {
	Ext.QuickTips.init();
	var menuStateStore = new Ext.data.ArrayStore({
		autoLoad :true,						//页面加载时自动load数据
		fields : ['key', 'value'],
		data : [['有效','1'],['无效', '0']]
	});
	/*****************************************   新增editForm开始  **************************************************/
	var editForm = new Ext.form.FormPanel({
		formId:'editForm',
        frame:true,
        border:false,
        labelAlign:'center',
        standardSubmit:false,
    	layout : 'form',//*form布局
        items : [{
	    	layout:'column',
        	items : [{
                 columnWidth : .5,					//列宽为25%
   	        	 layout : 'form',					//*form布局
   	        	 items: [{
	            	columnWidth : .5,					//列宽为25%
   	  	        	layout : 'form',					//*form布局
   	  	        	items: [{
   	  	        		fieldLabel : '<font color="red">*</font>菜单名称',
   	  	        		name : 'menuName', 
   	  	        		xtype : 'textfield', 			// 设置为数字输入框类型
   	  	        		labelStyle : 'text-align:right;',//右对齐
   	  	        		emptyText:'请您输入菜单名称',	//水印提示
   	  	        		allowBlank:false,               //allowBlank : false就是已经定义好的校验规则,extjs getForm().isValid()函数会调用已经定义的校验规则来验证输入框中的值
   	  	        		anchor : '90%'
   	  	        	}]
       	        },{
   	            	columnWidth : .5,					//列宽为25%
   					layout : 'form',					//*form布局
   					items : [{ //下拉框
   						xtype : 'combo',
   						fieldLabel : '<font color="red">*</font>菜单状态',
   						name : 'menuState',
   						store : menuStateStore,			//*加载客户类型Store
   						//下列属性在复用时一般不作修改
   						editable : false,				//false为不可编辑，页面效果为点击下拉框空白处直接触发下拉菜单
   						labelStyle : 'text-align:right;',//fieldLabel右对齐
   						triggerAction : 'all',			//*触发器被激活时执行allQuery查询
   						displayField : 'key',			//*下列列表选项的中文名，对应Store中的value
   						valueField : 'value',				//*下列列表选项对应的key值，对应Store中的key
   						mode : 'local',					//*读取本地数据
   						emptyText:'请您选择',				//*水印提示
   						resizable : false,				//*下拉框下部的缩放柄，可改变下拉框大小
   						allowBlank:false,               //allowBlank : false就是已经定义好的校验规则,extjs getForm().isValid()函数会调用已经定义的校验规则来验证输入框中的值
   						anchor : '90%'
   					}]	
   	            }]
        	},{
            	columnWidth : .5,					//列宽为25%
	  	        	layout : 'form',					//*form布局
	  	        	items: [{
	  	        		fieldLabel : '<font color="red">*</font>菜单URL',
	  	        		id:'menuUrl',				
	  	        		name : 'menuUrl', 
	  	        		xtype : 'textfield', 			// 设置为数字输入框类型
	  	        		labelStyle : 'text-align:right;',//右对齐
	  	        		emptyText:'请您输入菜单URL',	//水印提示
	  	        		anchor : '90%'
	  	        	}]
        	  },{
	            	columnWidth : .5,					//列宽为25%
   	  	        	layout : 'form',					//*form布局
   	  	        	items: [{
   	  	        		fieldLabel : '<font color="red">*</font>菜单排序',
   	  	        		id:'menuSort',				
   	  	        		name : 'menuSort', 
   	  	        		xtype : 'textfield', 			// 设置为数字输入框类型
   	  	        		labelStyle : 'text-align:right;',//右对齐
   	  	        		emptyText:'请您输入菜单排序',	//水印提示
   	  	        		allowBlank:false,               //allowBlank : false就是已经定义好的校验规则,extjs getForm().isValid()函数会调用已经定义的校验规则来验证输入框中的值
   	  	        		anchor : '90%'
   	  	        	}]
       	        }]
		},{
        	columnWidth : 1,					//列宽为25%
        	layout : 'form',					//*form布局
        	items: [{
                xtype : 'htmleditor',
                height : 140,
                width : 700,
                fontFamilies : ['宋体','黑体','隶书','微软雅黑','Arial','Courier New','Tahoma','Times New Roman','Verdana'],
                defaultFont: '宋体',
                defaultLinkValue:"http://www.",
                enableAlignments:true,
                enableColors:true,
                enableFont:true,
                enableFontSize:true,
                enableFormat:true,
                enableLinks:true,
                enableSourceEdit:true,
                fieldLabel:'菜单描述',
                labelStyle:'text-align:right;',
                name:'menuDesc',
                anchor:'95%'
            }]
	  },{
        	id:'menuId',
			name : 'menuId',
			xtype : 'hidden'
        },{
        	id:'menuPid',
			name : 'menuPid',
			xtype : 'hidden'
        },{
        	id:'createTime',
			name : 'createDate',
			xtype : 'hidden'
        }]
	});
	/*****************************************   新增editForm结束  **************************************************/
		
	/*****************************************   新增和修改editWindow窗口开始  **************************************************/
	var editWindow=new Ext.Window({
		id:'editWindow',
		width : 880,
		height :350,
		closable : true,
		resizable : false,
		collapsible : false,
		draggable : true,
		closeAction : 'hide',
		title : '新增系统菜单',
		modal : true, 
		animCollapse : false,
		border : false,
		closable : true,
		animateTarget : Ext.getBody(),
		constrain : true,
		items : [editForm],
		buttonAlign:'center',
		buttons:[{
			text:'保存',
			handler:function(){
				if(!editForm.getForm().isValid()){
					Ext.MessageBox.alert('系统提示', '请您正确输入各项信息!');
					return false;
				}         
				var pars = editForm.getForm().getFieldValues();
				var menuSort=pars.menuSort;
				var reg=/^\+?[1-9][0-9]*$/;//baseNum dimName    dimCd 
				if(!reg.test(menuSort)){
					Ext.MessageBox.alert('系统提示', '菜单排序必须是数字!');
               	 	return false;
                }
				//提交表单的方法
				editForm.getForm().submit({
					url : basepath + '/sysMenu/sysMenuInfoSave',
					method : 'POST',
					waitTilte : '系统提示',
					waitMsg : '正在提交数据,请稍后!',
                  	success:function(response){
                  		Ext.Msg.alert('系统提示', '保存成功!',function(btn){
                  			if(btn == 'ok'){
                  			}
                  		});
                  	},
                  	failure : function(form, action){
                    	Ext.MessageBox.alert('系统提示', '保存失败!');
                  	},
				});
				editWindow.hide();
      	  	}
		},{
			text: '关闭',
			handler:function(){
				editWindow.hide();
          	}
		}]  
	});
	/*****************************************   新增和修改editWindow窗口结束  **************************************************/
	/*******************************************列表菜单树开始***************************************************/
	 //定义树的加载器 
	 var treeloader = new Ext.ux.tree.TreeGridLoader({ 
	     dataUrl : basepath	+ '/sysMenu/getAuthSysMenuInfoJson',
	 }); 
     //定义treegrid 
     var treeGrid = new Ext.ux.tree.TreeGrid({ 
         title : '菜单列表树',                //表头名称，去掉则不显示表头
         width: '100%',
         border : false,
         animate : true, 
         enableDD : true, //节点是否可移动
         enableSort:false,           //默认为true，控件根据列的内容排序；置为false，则按照数据顺序显示
         autoScroll : true,
         columnLines: true,// 斑马线 , 
         rootVisible : false, 
         height : document.body.scrollHeight-20,
         tbar : [{
	    		text : '新增',
	    		iconCls : 'addIconCss',   //定义图标
	    		handler : function(){	  //调用新增方法
          		editWindow.setTitle("新增系统菜单");
          		editForm.getForm().reset();
	            	editWindow.restore();
	            	editWindow.show();
	    		}
          }, '-', {
      			text : '修改',
      			iconCls : 'editIconCss',
      			handler : function() { 
      				var node = treeGrid.selModel.selNode;
	            	if(null!=node){
						editWindow.setTitle("修改系统菜单");
						var dataMap = {};
						var data = {};
						data['menuId'] = node.attributes.id;
						data['menuName'] = node.attributes.text;
						data['menuPid'] = node.attributes.menuPid;
						data['menuIcon'] = node.attributes.menuIcon;
						data['menuUrl'] = node.attributes.menuUrl;
						data['menuState'] = node.attributes.menuState;
						data['menuSort'] = node.attributes.menuSort;
						data['menuDesc'] = node.attributes.menuDesc;
						dataMap['data']=data;
		                editForm.getForm().loadRecord(dataMap);
		                editWindow.restore();
	            		editWindow.show();
					}else{
						Ext.Msg.alert("系统提示", "请您先选择一条要修改的记录!");
					}
      			}
	    	}, '-', {
	    		text : '删除',
	    		iconCls : 'deleteIconCss',
	    		handler : function() { 
	    			var node = treeGrid.selModel.selNode;
	            	if(null==node){
	                    Ext.Msg.alert("系统提示", "请您先选择一条要删除的记录!");
	                    return ;
	                }else{
	                	if(node.attributes.leaf&&node.attributes.children.length==0){
	                		Ext.MessageBox.confirm("系统提示","您确定要删除吗?",
	                      	  	function(button,text){ 
	                				if( button == 'yes'){  
			                			Ext.Ajax.request({
											url : basepath	+ '/sysMenu/sysMenuInfoDelete?idStr=' + node.attributes.id,
											waitTilte : '系统提示',
											waitMsg : '正在删除数据,请您等待...', // 显示读盘的动画效果，执行完成后效果消失
											success : function(response) {
												Ext.Msg.alert("系统提示", response.responseText);
											},
											failure : function() {
												Ext.MessageBox.alert('系统提示', '操作失败!');
											}
										});
	                				}
	                			}
	                		);
	                	}else{
	                		Ext.MessageBox.alert('系统提示', '该菜单下有子菜单无法删除!');
	                	}
                  }
				}
	    	}, '-', {
	    		text : '详情', 
	    		iconCls : 'detailIconCss',
	    		handler : function() { 
		    		if(treeGrid.selModel.hasSelection()){
		    			// 得到被选择的行
		    			var _record = treeGrid.getSelectionModel();
						if (_record.selections.length>1) {
							Ext.MessageBox.alert('系统提示', '请您选择其中一条记录进行查看!');
							return false;
						} else {
							detailForm.getForm().loadRecord(_record.getSelected());
							detailWindow.restore();
                  		detailWindow.show();
						}
					}else{
						Ext.Msg.alert("系统提示", "请您先选择一条要查看的记录!");
					}
				}
	    	},{
	    		xtype : 'textfield',
	    		id:'menuName',	
	    		name : 'menuName', 
	    		emptyText : '请您输入要查询的菜单名称',
	    		anchor : '90%' 
          },{
        	  	text : '搜索',
          		iconCls : 'searchIconCss',
          		handler : function(){
          			debugger;
	          		var menuName = Ext.getCmp("menuName").getValue();
	          		treeGrid.loader.dataUrl = basepath	+ '/sysMenu/getAuthSysMenuInfoJson?menuName='+menuName;
	          		treeGrid.loader.treeloader();
	          		/*Ext.Ajax.request({
	          			url : basepath	+ '/sysMenu/getAuthSysMenuInfoJson',
						mothed: 'GET',
						params :{
							"menuName":menuName
						},
	                  	success:function(response){
//	                  		treeGrid('loadData', response.responseText);
	                  		treeGrid('loadData', response.responseText);//加载数据更新treegrid
	                  	}
					});*/
          		}
          },{
        	  	text : '重置',
          		iconCls : 'resetIconCss',
          		handler : function(){
          			Ext.getCmp("menuName").setValue('');
          			dataStore.load({
    					params : {
        					start : 0,
        					limit : parseInt(pagesize_combo.getValue())
        				}
    				});
          		}
          	}
         ],
         columns : [ { header : '菜单名称', dataIndex : 'text', width : 150,align : 'left',sortable:true
         	},{  header : '菜单URL',dataIndex : 'menuUrl', width : 250,align : 'left'
         	},{ header : '菜单图标', dataIndex : 'menuIcon',width : 80,align : 'left'
         	},{ header : '菜单状态', dataIndex : 'menuState',width : 80,align : 'left',
         		renderer : function(value){
    	    	  	if(value=="1"){
    	    	  		return "<span style='color:green;'>有效</span>";
    	    	  	}else if( value=="0"){
    	    	  		return "<span style='color:red;'>无效</span>";
    	    	  	}
    	      	}
         	},{ header : '菜单排序', dataIndex : 'menuSort',width : 80,align : 'left',sortable : true 
        	},{ header : '创建时间', dataIndex : 'createTime',width : 120,align : 'left',sortable : true 
        	},{ header : '更新时间', dataIndex : 'updateTime',width : 120,align : 'left',sortable : true 
        	},{ header : '菜单描述', dataIndex : 'menuDesc',width : 200
         }], 
         loadMask:{  
             msg : '正在加载数据,请稍等...'  
         },
         loader : treeloader //绑定加载器 
     }); 
     treeGrid.expandAll();
     var treeContainer = new Ext.Panel( {
    	 border : false,
         region : 'center',
         layout : 'fit',
         items : [ treeGrid ]
     });
	/*******************************************列表菜单树结束***************************************************/

	/*****************************************   布局模型开始  **************************************************/
	var viewport = new Ext.Viewport({
	    layout:'fit',
	    items:[{
			layout : 'border',
			items: [treeContainer]
	    }]
	});
	/*****************************************   布局模型结束  **************************************************/
});
/********************************************Ext入口函数，相当于java中的主函数结束********************************************/


俗尘某某
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Extjs3.0 pdf
11-21
深入浅出 Extjs3.0 中文文档，深入浅出 Extjs3.0 中文文档
Extjs通用权限管理系统
12-03
《Extjs通用权限管理系统》是一款基于Java技术栈和Extjs前端框架构建的权限管理解决方案。该系统涵盖了用户、角色及权限三大核心要素的管理和控制，旨在为企业或组织提供高效、安全的权限分配与管理功能。 在后端，...
主题：ExtJS 3.0 优秀扩展简介 (持续更新)《转载》
FlexFun&Maven Driver
04-19 174
自带示例里面的扩展就不说了,都会自己的看的:   如果链接有错,或者你有其他好的插件推荐,请留言,谢谢   1.TreeGrid   1)简介: 看图吧...   2) 示例图 3)官方帖: TreeGrid (Ext.ux.maximgb.tg) - a tree grid component based on Ext's native grid. http:...
ExtJS学习笔记（六） 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
萧逸闲侃
09-05 1491
声明：本文案例讲解摘自资料，部分资料收集自他人博客。  通过此文能学习到如下内容       1.创建一个简单的面板 Ext.Panel       2.制作一个可以拖动的面板 Ext.Panel       3 .使用选项卡面板       3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容)       面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，
ExtJS 3.0 优秀扩展简介 (持续更新)
天猪部落阁 - (ExtJS && AS3 && Java)
08-14 157
自带示例里面的扩展就不说了,都会自己的看的:   如果链接有错,或者你有其他好的插件推荐,请留言,谢谢   1.TreeGrid   1)简介: 看图吧...   2) 示例图 3)官方帖: TreeGrid (Ext.ux.maximgb.tg) - a tree grid component based on Ext's...
基于ExtJs的桌面系统（1）
KeepCoding
06-25 694
最近要开发一个小型的管理系统，后台用的是java（其实是baby的），然后前端用啥好呢，之前项目后台管理的一般用easyui，很好用也很顺手。然而这次无意中发现了ExtJs desktop，觉得真是挺赞的，虽然已经挺老的模板了，不过作为初步学习，也很值得。
信息办公ExtJS 2.2 图书管理系统-bmsh
最新发布
11-23
系统架构:struts2(json-plugin) + spring2 + ibatis2 + extjs2.2 + sqlserver2000 希望能和大家一起讨论学习。 自我感觉代码布局不够严谨，还有待进一步提高和练习。
SSH+Extjs4 0实现的权限管理系统 基于角色的权限设计
10-08
《SSH+Extjs4.0实现的权限管理系统：基于角色的权限设计》 在IT行业中，权限管理系统是保障系统安全性和数据隐私的关键组件。本文将深入探讨如何利用SSH（Spring、Struts2、Hibernate）框架结合Extjs4.0前端库，...
基于ExtJS5的后台管理系统案例 - 源码
06-03
ExtJS5是一款强大的JavaScript框架，主要用于构建富客户端的Web应用程序，尤其在开发复杂的后台管理系统时，它的优势尤为显著。这套基于ExtJS5的后台管理系统案例提供了丰富的功能和组件，可以帮助开发者快速搭建...
extjs3.0框架
02-04
extjs3.0框架extjs3.0框架extjs3.0框架extjs3.0框架
Extjs 3.X帮助文档(中文版)
04-08
NULL 博文链接：https://chenlin10058.iteye.com/blog/1596978
extjs3-0-0.d.ts
03-19
extjs3.0 的 Typescript声明文件
ExtJS3.2正式版
09-29
ExtJS3.2正式版 货真价实 ExtJS3.2正式版
ExtJs3 演示系统
03-24
ExtJs3实现、简洁的、静态数据模拟的员工管理系统
extJs3升级extjs4方案
04-22
extJs3升级extjs4方案， extJs3升级extjs4需要修改大量代码
Extjs3.0角色权限管理系统-菜单管理模块篇
俗尘某某
11-17 2439
1.菜单管理功能模块效果图如下 2.用户管理功能模块->新增、修改和详情功能大致相同，故截一个图，效果图如下 菜单管理模块后台controller代码 package com.gsww.controller.sys; import java.util.HashMap; import java.util.List; import java.util.Map; imp
ExtJs3.0
w19912002的专栏
04-26 433
* ExtJS 后台json传数据到前台： 1、myStore.load({            params:{            },            waitTitle:'提示',waitMsg: '数据加载请稍后...',            callback: function(records, options, success){
ExtJS5 - 一个简洁完整的后台管理系统入门实例
热门推荐
般若
01-19 1万+
ExtJs5新增了对MVVM模式的支持，该实例演示了其基本用法，在此基础上可快速搭建实际项目，完成更复杂的业务功能。 该实例为典型的单页面应用（SPA），各功能模块封装成独立的JS文件，并按需加载（非一次性加载所有JS文件）。
ExtJS4.2简易权限管理系统
12-23
ExtJS4.2简单布局+权限管理+SqlServer2008(绑定数据、添加、修改、删除、查询、导入和导出、Ztree等)
ExtJs3.0 Ext.form.CheckboxGroup批量取值和设值方法
05-24
Ext.form.CheckboxGroup是一个可以包含多个checkbox的组件，可以通过以下方法批量取值和设值： 1. 批量取值： ```javascript var checkboxGroup = Ext.getCmp('checkboxGroupId'); // 获取组件 var values = checkboxGroup.getValue(); // 获取所有选中checkbox的value值，返回一个Array ``` 2. 批量设值： ```javascript var checkboxGroup = Ext.getCmp('checkboxGroupId'); // 获取组件 checkboxGroup.setValue(["value1", "value2", ...]); // 设置多个checkbox的value值，参数为一个Array ``` 其中，'checkboxGroupId'是checkboxGroup组件的id属性值。注意，如果checkbox的value值为数字类型，getValue()方法返回的也是数字类型的数组。如果checkbox的value值为字符串类型，getValue()方法返回的是字符串类型的数组。setValue()方法的参数也需要根据checkbox的value值类型进行设置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值