1.選單管理功能模組效果圖如下

2.使用者管理功能模組->新增、修改和詳情功能大致相同，故截一個圖，效果圖如下

選單管理模組後臺controller程式碼

package com.gsww.controller.sys;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.jpa.domain.Specification;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springside.modules.web.Servlets;

import com.gsww.controller.BaseController;
import com.gsww.entity.sys.SysMenu;
import com.gsww.entity.sys.SysMenuInfo;
import com.gsww.entity.sys.SysSession;
import com.gsww.service.sys.SysMenuInfoService;
import com.gsww.util.PageUtils;
import com.gsww.util.TimeHelper;

/**
 * 系統系統選單管理
 * @author Administrator
 *
 */
@Controller
@RequestMapping(value = "/sysMenu")
public class SysMenuInfoController extends BaseController{
	
	@Autowired
	private SysMenuInfoService sysMenuInfoService;
	
	/*
	 * 返回系統選單管理頁面
	 */
	@RequestMapping(value = "/getSysMenuIndex")
	public String getSysMenuIndex(HttpServletRequest request, 
			HttpServletResponse response) throws Exception{
		return "sysManage/sysMenuInfo";
	}
	
	/*
	 * 返回系統選單列表樹管理頁面
	 */
	@RequestMapping(value = "/getSysMenuTreeTableIndex")
	public String getSysMenuTreeTableIndex(HttpServletRequest request, 
			HttpServletResponse response) throws Exception{
		return "sysManage/sysMenuTreeTable";
	}
	
	/*
	 * 獲取系統選單分頁列表
	 */
	@RequestMapping(value = "/getSysMenuInfoPage",method = RequestMethod.GET)
	public void getSysMenuInfoPage(@RequestParam(value = "start", defaultValue = "1") int page,
			@RequestParam(value = "limit", defaultValue = LIMIT) int pageSize,
			@RequestParam(value = "orderField", defaultValue = "menuSort") String orderField,
			@RequestParam(value = "orderSort", defaultValue = "ASC") String orderSort,
			@RequestParam(value = "menuName", defaultValue = "") String menuName,
			@RequestParam(value = "findNowPage", defaultValue = "false") String findNowPage,
			Model model,HttpServletRequest request,HttpServletResponse response){
		try {
			//初始化分頁資料
			page = page/pageSize + 1;
			PageUtils pageUtils=new PageUtils(page,pageSize,orderField,orderSort);
			PageRequest pageRequest=super.buildPageRequest(request,pageUtils,SysMenuInfo.class,findNowPage);
			//獲取頁面的引數
			Map<String, Object> searchParams = Servlets.getParametersStartingWith(request, "search_");
			if(StringUtils.isNotBlank(menuName)){
				searchParams.put("LIKE_menuName", menuName);
			}
			Specification<SysMenuInfo> spec=super.toSpecification(searchParams, SysMenuInfo.class);
			//分頁
			Page<SysMenuInfo> sysRolePage = sysMenuInfoService.getSysMenuInfoPage(spec, pageRequest);
			for (SysMenuInfo sysMenuInfo : sysRolePage.getContent()) {
				String pId = sysMenuInfo.getMenuPid();
				if(!pId.equals("0")){
					SysMenuInfo smi = sysMenuInfoService.getSysMenuInfoByMenuId(pId);
					if(null!=smi){
						sysMenuInfo.setMenuPname(smi.getMenuName());
					}
				}
			}
			Map<String,Object> dataMap = new HashMap<String,Object>();
			dataMap.put("data", sysRolePage.getContent());
			dataMap.put("count", sysRolePage.getTotalElements());
			this.getJson(response, dataMap);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	/*
	 * 返回系統選單JSON資料
	 */
	@RequestMapping(value = "/getSysMenuInfoJson")
	public void getSysMenuInfoJson(HttpServletRequest request, 
			HttpServletResponse response) throws Exception{
		SysSession sysSession = (SysSession) request.getSession().getAttribute("sysSession");
		List<SysMenu> rootMenu = sysMenuInfoService.getSysMenuInfoJson(sysSession.getUserId());
		JSONArray jsonarr = JSONArray.fromObject(rootMenu);
		this.getJson(response, jsonarr.toString());
	}
	
	/*
	 * 返回系統選單樹表格Json資料
	 */
	@RequestMapping(value = "/getAuthSysMenuInfoJson")
	public void getAuthSysMenuInfoJson(HttpServletRequest request, 
			HttpServletResponse response,String menuName) throws Exception{
		List<SysMenu> rootMenu = sysMenuInfoService.getAuthSysMenuInfoJson(menuName);
		JSONArray jsonarr = JSONArray.fromObject(rootMenu);
		this.getJson(response, jsonarr.toString());
	}
	
	/*
	 * 系統選單新增
	 */
	@RequestMapping(value = "/sysMenuInfoSave",method = RequestMethod.POST)
	public void sysMenuInfoSave(HttpServletRequest request, 
			HttpServletResponse response,SysMenuInfo sysMenuInfo) throws Exception{
		String pId = sysMenuInfo.getMenuPid();
		String menuId = sysMenuInfo.getMenuId();
		if(StringUtils.isBlank(pId)){
			sysMenuInfo.setMenuPid("0");
		}
		if(StringUtils.isBlank(menuId)){
			sysMenuInfo.setCreateTime(TimeHelper.getCurrentTime());
		}else{
			sysMenuInfo.setUpdateTime(TimeHelper.getCurrentTime());
		}
		String menuState = sysMenuInfo.getMenuState();
		if(StringUtils.isNotBlank(menuState)){
			if(menuState.equals("有效")){
				menuState = "1";
			}else{
				menuState = "0";
			}
			sysMenuInfo.setMenuState(menuState);
		}
		sysMenuInfoService.sysMenuInfoSave(sysMenuInfo);
	}
	
	/*
	 * 系統選單刪除
	 */
	@RequestMapping(value = "/sysMenuInfoDelete",method = RequestMethod.GET)
	public void sysMenuInfoDelete(HttpServletRequest request,
			HttpServletResponse response,String idStr) throws Exception{
		if(StringUtils.isNotBlank(idStr)){
			String[] arr = idStr.split(",");
			int delSum = 0; 
			for (String menuId : arr) {
				List<SysMenuInfo> listMenu = sysMenuInfoService.getSysMenuInfoByPid(menuId);
				if(listMenu.size()==0){				
					sysMenuInfoService.sysMenuInfoDelet(menuId);
					delSum++;
				}
			}
			String message = "您成功刪除了"+delSum+"條記錄!";
			int failSum = arr.length-delSum;
			if(failSum>0){
				message+=","+failSum+"條記錄由於下面有子選單,刪除失敗!";
			}
			this.getJson(response, message);
		}
	}
	
	/*
	 * 系統選單啟用停用
	 */
	@RequestMapping(value = "/sysMenuInfoUpdate",method = RequestMethod.GET)
	public void sysMenuInfoUpdate(HttpServletRequest request,
			HttpServletResponse response,String idStr,String menuState) throws Exception{
		if(StringUtils.isNotBlank(idStr)){
			String[] arr = idStr.split(",");
			int sucSum = 0; 
			for (String menuId : arr) {
				SysMenuInfo sysMenuInfo = sysMenuInfoService.getSysMenuInfoByMenuId(menuId);
				if(sysMenuInfo!=null){
					String parState = sysMenuInfo.getMenuState();
					if(!parState.equals(menuState)){
						//啟用或停用選單
						sysMenuInfoService.sysMenuInfoUpdate(menuState, menuId);
						sucSum++;
					}
				}
			}
			String menuStateText = menuState!=null&&menuState.equals("1")?"啟用":"停用";
			String message = "您成功"+menuStateText+sucSum+"條記錄!";
			int failSum = arr.length-sucSum;
			if(failSum>0){
				message+=","+failSum+"條記錄由於已"+menuStateText+","+menuStateText+"失敗!";
			}
			this.getJson(response, message);
		}
	}
}
 

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<%@ include file="/resource/include/meta.jsp"%>
  <head>
    <title>選單管理</title>
	<script type="text/javascript" src="${ctx}/resource/common/js/sysManage/sysMenuInfo.js"></script>
  </head>
  <body>
  	<div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index: 90000;
  		border:1px solid #ccc;width:278px;height:200px;overflow:auto;background:#fff;">
	    <ul id="treeDemo" class="ztree" style="margin-top:0;"></ul>
	</div>
  </body>
  <script type="text/javascript">
  /*******************************************zTree樹配置開始************************************************/
	var setting = {
        view: {
            selectedMulti: false//是否支援同時選中多個節點
        },
        data: {
            key: {
                //將treeNode的ItemName屬性當做節點名稱
                name: "text"        
            },
            simpleData: {
                enable: true,//是否使用簡單資料模式
                idKey: "id",//當前節點id屬性  
                pIdKey: "pId",//當前節點的父節點id屬性 
                rootPId: 0//用於修正根節點父節點資料，即pIdKey指定的屬性值
            }
        },
        callback: {
            onClick: onClick
        }
    };

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getSelectedNodes();
        $("#menuPname").attr("value", nodes[0].text);
        $("#menuPid").attr("value", nodes[0].id);
    }

    function showMenu() {
        var cityObj = $("#menuPname");
        var cityOffset = $("#menuPname").offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }
    var zNodes = [];
    $(function(){
     	$.ajax({    
            async : false,    
            cache:false,    
            type: 'POST',    
            dataType : 'json',    
            url: basepath + '/sysMenu/getAuthSysMenuInfoJson',
            success:function(data){ 
               zNodes = data;  
            },  
            error: function () {
            },    
        });   
        var treeObj =  $.fn.zTree.init($("#treeDemo"), setting, zNodes);  
        treeObj.expandAll(true);//預設展開所有節點   
    });
	/*******************************************zTree樹配置結束************************************************/
  </script>
</html>
 

/********************************************Ext入口函式，相當於java中的主函式開始********************************************/
Ext.onReady(function() {
	Ext.QuickTips.init();
	var menuStateStore = new Ext.data.ArrayStore({
		autoLoad :true,						//頁面載入時自動load資料
		fields : ['key', 'value'],
		data : [['有效','1'],['無效', '0']]
	});
	var record = Ext.data.Record.create([
        {name:'menuId'},
		{name:'menuName'},
		{name:'menuPname'},
		{name:'menuUrl'},
		{name:'menuIcon'},
		{name:'menuPid'},
		{name:'menuState'},
		{name:'menuSort'},
		{name:'createTime'},
		{name:'updateTime'},
		{name:'menuDesc'}
	  ]);
	/*****************************      表格資料代理Store開始       *******************************************/
	var dataStore = new Ext.data.Store({
	    restful : true,     
	    autoLoad : true,
	    proxy : new Ext.data.HttpProxy({
	        url:basepath+'/sysMenu/getSysMenuInfoPage',
			method : 'GET'
	    }),
	    reader : new Ext.data.JsonReader({
			successProperty : 'success',
			idProperty : 'ID',
			messageProperty : 'message',
			root : 'data',
			totalProperty : 'count'
		}, record)
	});
	/*****************************      表格資料代理Store結束       *******************************************/

	/*****************************      定義自動當前頁行號開始       *******************************************/
	var rownum = new Ext.grid.RowNumberer({
		header : 'No.',
		width : 28
	});
	/*****************************      定義自動當前頁行號結束       *******************************************/
	
	/*****************************      定義複選框開始       *******************************************/
	var sm = new Ext.grid.CheckboxSelectionModel();
	/*****************************      定義複選框結束       *******************************************/
	
	/*****************************      設定分頁引數開始       *******************************************/
	var pagesize_combo = new Ext.form.ComboBox({
        name : 'pagesize',
        triggerAction : 'all',
        mode : 'local',
        store : new Ext.data.ArrayStore({
            fields : ['value', 'text'],
            data : [ [ 10, '10條/頁' ], [ 20, '20條/頁' ], [ 50, '50條/頁' ],
						[ 100, '100條/頁' ], [ 250, '250條/頁' ],
						[ 500, '500條/頁' ] ]
        }),
        valueField : 'value',
        displayField : 'text',
        value: 20,
        editable : false,
        width : 85
	});
	
	var bbar = new Ext.PagingToolbar({					//分頁元件
        pageSize : parseInt(pagesize_combo.getValue()),
        store : dataStore,
        displayInfo : true,
        displayMsg : '顯示{0}條到{1}條,共{2}條',       
        emptyMsg : "沒有符合條件的記錄",
        items : ['-', '  ', pagesize_combo]
    });
	pagesize_combo.on("select", function(comboBox) {
        bbar.pageSize = parseInt(pagesize_combo.getValue()),
        dataStore.reload({
            params : {
                start : 0,
                limit : parseInt(pagesize_combo.getValue())
            }
        });
    });
	/*****************************       設定分頁引數結束       *******************************************/
	
	/*****************************************   新增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: [{
   	  	        		fieldLabel : '選單圖示',
   	  	        		id : 'menuIcon', 
   	  	        		name : 'menuIcon', 
   	  	        		xtype : 'textfield', 			// 設定為數字輸入框型別
   	  	        		labelStyle : 'text-align:right;',//右對齊
   	  	        		emptyText:'請您選擇選單圖示',	//水印提示
   	  	        		anchor : '90%',
   	  	        		readOnly:true
   	  	        	}]
       	        },{
   	            	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 : '父級選單',
   						id : 'menuPname',
   	  	        		name : 'menuPname', 
   	  	        		xtype : 'textfield', 			// 設定為數字輸入框型別
   	  	        		labelStyle : 'text-align:right;',//右對齊
   	  	        		emptyText:'請您選擇父級選單',	//水印提示
   	  	        		anchor : '90%',
   	  	        		readOnly:true,
     				    listeners:{
     				    	focus: function(){
     				    		showMenu();
     				        },
     				    	blur: function(){
     				    		hideMenu();
     				        } 
     				    }
   				    }]	
   	            },{
	            	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'){
                  				dataStore.load({
                  					params : {
                      					start : 0,
                      					limit : parseInt(pagesize_combo.getValue())
                      				}
                  				});
                  			}
                  		});
                  	},
                  	failure : function(form, action){
                    	Ext.MessageBox.alert('系統提示', '儲存失敗!');
                  	},
				});
				editWindow.hide();
      	  	}
		},{
			text: '關閉',
			handler:function(){
				editWindow.hide();
          	}
		}]  
	});
	/*****************************************   新增和修改editWindow視窗結束  **************************************************/
	
   /*****************************************   詳情detailForm開始  **************************************************/
   var detailForm=new Ext.FormPanel({
        formId:'detailForm',
        frame:true,
        border:false,
        labelAlign:'right',
        standardSubmit:false,
        width : '100%',
        layout:'form',
        items : [{
        	layout:'column',
        	items : [{
        		columnWidth : .5,
            	layout : 'form',
                items : [{
                    xtype : 'textfield',
                    fieldLabel : '選單ID',
                    name : 'menuId', 
                    editable : false,
                    anchor : '90%' 
                },{                                
                	xtype : 'textfield',
                    fieldLabel : '選單URL',
                    name : 'menuUrl', 
                    readOnly:true,
                    editable : false,
                    anchor : '90%' 
                },{
                	xtype : 'textfield',
                    fieldLabel : '父級選單',
                    name : 'menuPname', 
                    readOnly:true,
                    editable : false,
                    anchor : '90%' 
                },{
                	xtype : 'textfield',
                    fieldLabel : '選單排序',
                    name : 'menuSort', 
                    readOnly:true,
                    editable : false,
                    anchor : '90%' 
                }]
        	},{
                columnWidth : .5,
                layout : 'form',
                items : [{
                	xtype : 'textfield',
                    fieldLabel : '選單名稱',
                    name : 'menuName', 
                    readOnly:true,
                    editable : false,
                    anchor : '90%' 
                },{
                	xtype : 'textfield',
                    fieldLabel : '選單圖示',
                    name : 'menuIcon', 
                    readOnly:true,
                    editable : false,
                    anchor : '90%' 
                },{                                
                	xtype : 'combo',
                    fieldLabel : '選單狀態',
                    labelStyle:{
                        width:'120px'
                    },        
                    name : 'menuState',
                    allowBlank:false,
                    mode:'local',
                    emptyText:'請您選擇',
                    store:menuStateStore,
                    triggerAction:'all',
                    valueField:'value',
                    editable : false,
                    displayField:'key',
                    anchor : '90%'
                }]
        	},{
                columnWidth : .5,
                layout : 'form',
                items : [{                                
                	xtype : 'textfield',
                    fieldLabel : '建立時間',
                    name : 'createTime', 
                    readOnly:true,
                    editable : false,
                    anchor : '90%' 
                }]
        	},{
                columnWidth : .5,
                layout : 'form',
                items : [{                                
                	xtype : 'textfield',
                    fieldLabel : '更新時間',
                    name : 'updateTime', 
                    readOnly:true,
                    editable : false,
                    anchor : '90%' 
                }]
        	}]
        },{
            columnWidth : .5,
            layout : 'form',
            items : [{
                xtype : 'htmleditor',
                height : 140,
                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,
                enableLists:true,
                enableSourceEdit:true,
                id:'noticeContentBaby',
                fieldLabel : '選單描述',
                readOnly:true,
                name : 'menuDesc',
                anchor : '95%' 
            }]
    	}]
    }); 
    /*****************************************   詳情detailForm結束  **************************************************/
   
	/*****************************************   詳情detailWindow視窗開始  **************************************************/
	var detailWindow = new Ext.Window({
		id:'detailWindow',
		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 : [detailForm],
		buttonAlign:'center',
	    buttons : [{
	        text : '關閉',
	        handler : function() {
	    		detailWindow.hide();
	    		dataStore.reload();
	        }
	    }]
	});
	/*****************************************   詳情detailWindow視窗結束  **************************************************/
	
	/*****************************************  系統選單資訊表格開始  **************************************************/
    var grid = new Ext.grid.GridPanel({
        title : '系統選單資訊',
        store : dataStore, 
        region : 'center',
        stripeRows : true, 
        border : false,
        tbar : [
            {
	    		text : '新增',
	    		iconCls : 'addIconCss',   //定義圖示
	    		handler : function(){	  //呼叫新增方法
            		editWindow.setTitle("新增系統選單");
            		editForm.getForm().reset();
	            	editWindow.restore();
	            	editWindow.show();
	    		}
            }, '-', {
        		text : '修改',
    			iconCls : 'editIconCss',
    			handler : function() { 
	            	if(grid.selModel.hasSelection()){
	            		// 得到被選擇的行
						var record = grid.getSelectionModel();
						if (record.selections.length>1) {
							Ext.MessageBox.alert('系統提示', '請您選擇其中一條記錄進行修改!');
							return false;
						} else {
							editWindow.setTitle("修改系統選單");
			                editForm.getForm().loadRecord(record.getSelected());
			                editWindow.restore();
		            		editWindow.show();
						}
					}else{
						Ext.Msg.alert("系統提示", "請您先選擇一條要修改的記錄!");
					}
    			}
	    	}, '-', {
	    		text : '刪除',
	    		iconCls : 'deleteIconCss',
	    		handler : function() { 
		    		var checkedNodes = grid.getSelectionModel().selections.items;
	                if(checkedNodes.length==0){
	                    Ext.Msg.alert("系統提示", "請您先選擇一條要刪除的記錄!");
	                    return ;
	                }else{
	                	Ext.MessageBox.confirm("系統提示","您確定要刪除嗎?",
                  	  		function(button,text){  
                                if( button == 'yes'){  
                                	var idStr = "";
        	                        for(var i=0;i<checkedNodes.length;i++){
        	                            var menuId = checkedNodes[i].data.menuId;
        	                            idStr +=menuId+",";
        	                        }
        							Ext.Ajax.request({
        								url : basepath	+ '/sysMenu/sysMenuInfoDelete?idStr=' + idStr,
        								waitTilte : '系統提示',
        								waitMsg : '正在刪除資料,請您等待...', // 顯示讀盤的動畫效果，執行完成後效果消失
        								success : function(response) {
        									Ext.Msg.alert("系統提示", response.responseText);
        									dataStore.reload();
        								},
        								failure : function() {
        									Ext.MessageBox.alert('系統提示', '操作失敗!');
        								}
        							});
                                }  
                            }   
                        ); 
                    }
				}
	    	}, '-', {
	    		text : '詳情', 
	    		iconCls : 'detailIconCss',
	    		handler : function() { 
		    		if(grid.selModel.hasSelection()){
		    			// 得到被選擇的行
		    			var _record = grid.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("系統提示", "請您先選擇一條要檢視的記錄!");
					}
				}
	    	},'-', {
	    		text : '啟用', 
	    		iconCls : 'optionIconCss',
	    		handler : function() { 
		    		if(grid.selModel.hasSelection()){
	    				var idStr = "";
		    			var _record = grid.getSelectionModel().selections.items;
                        for(var i=0;i<_record.length;i++){
                            var menuId = _record[i].data.menuId;
                            idStr +=menuId+",";
                        }
                        Ext.Ajax.request({
							url : basepath	+ '/sysMenu/sysMenuInfoUpdate?idStr=' + idStr+'&menuState=1',
							waitTilte : '系統提示',
							waitMsg : '正在啟用資料,請您等待...', // 顯示讀盤的動畫效果，執行完成後效果消失
							success : function(response) {
								Ext.Msg.alert("系統提示", response.responseText);
								dataStore.reload();
							},
							failure : function() {
								Ext.MessageBox.alert('系統提示', '操作失敗!');
							}
						});
					}else{
						Ext.Msg.alert("系統提示", "請您先選擇一條要啟用的記錄!");
					}
				}
	    	},'-', {
	    		text : '停用', 
	    		iconCls : 'optionIconCss',
	    		handler : function() { 
		    		if(grid.selModel.hasSelection()){
	    				var idStr = "";
		    			var _record = grid.getSelectionModel().selections.items;
	                    for(var i=0;i<_record.length;i++){
	                        var menuId = _record[i].data.menuId;
	                        idStr +=menuId+",";
	                    }
	                    Ext.Ajax.request({
							url : basepath	+ '/sysMenu/sysMenuInfoUpdate?idStr=' + idStr+'&menuState=0',
							waitTilte : '系統提示',
							waitMsg : '正在停用資料,請您等待...', // 顯示讀盤的動畫效果，執行完成後效果消失
							success : function(response) {
								Ext.Msg.alert("系統提示", response.responseText);
								dataStore.reload();
							},
							failure : function() {
								Ext.MessageBox.alert('系統提示', '操作失敗!');
							}
						});
					}else{
						Ext.Msg.alert("系統提示", "請您先選擇一條要停用的記錄!");
					}
				}
	    	},{
                xtype : 'textfield',
                id:'menuName',	
                name : 'menuName', 
                emptyText : '請您輸入要查詢的選單名稱',
                anchor : '90%' 
            },{
            	text : '搜尋',
            	iconCls : 'searchIconCss',
            	handler : function(){
            		var menuName = Ext.getCmp("menuName").getValue();
            		dataStore.load({
      					params : {
          					start : 0,
          					menuName :menuName,
          					limit : parseInt(pagesize_combo.getValue())
          				}
      				});
            	}
            },{
            	text : '重置',
            	iconCls : 'resetIconCss',
            	handler : function(){
            		Ext.getCmp("menuName").setValue('');
            		dataStore.load({
      					params : {
          					start : 0,
          					limit : parseInt(pagesize_combo.getValue())
          				}
      				});
            	}
            }
    	],
        cm : new Ext.grid.ColumnModel([					//定義列模型
       	        rownum,sm, 
                {header : 'ID',dataIndex : 'menuId',sortable : true/*表示為可在該列上進行排列*/,hidden : true},
                {header : '選單名稱',dataIndex : 'menuName',width : 80,sortable : true},
        	    {header : '選單URL',dataIndex : 'menuUrl',width : 200,sortable : true},
        	    {header : '選單圖示',dataIndex : 'menuIcon',width : 80,sortable : true},
        	    {header : '選單父級ID',dataIndex : 'menuPid',width : 80,sortable : true},
        	    {header : '選單狀態',dataIndex : 'menuState',width : 80,sortable : true,
        	    	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,sortable : true},
        	    {header : '建立時間',dataIndex : 'createTime',width : 100,sortable : true},
        	    {header : '更新時間',dataIndex : 'updateTime',width : 100,sortable : true},
        	    {header : '選單描述',dataIndex : 'menuDesc',width : 250,sortable : true},
        	    {header : '父級選單',dataIndex : 'menuPname',width : 80,hidden : true},
    	]),
        sm : sm,		//定義複選框
	    bbar : bbar,
        viewConfig : {
        },
        loadMask : {
            msg : '正在載入表格資料,請您稍等...'
        },
        listeners:{
        	rowdblclick:function(grid,row){
    			var _record = grid.getSelectionModel();
				if (_record.selections.length>1) {
					Ext.MessageBox.alert('系統提示', '請您選擇其中一條記錄進行檢視!');
					return false;
				} else {
					detailForm.getForm().loadRecord(_record.getSelected());
					dataStore.load({
						params : {
							id :_record.getSelected().data.id
                    	},
                    	callback:function(){
                    		detailWindow.show();
                    	}
					});
				}
        	}
        }
    });
    /*****************************************  系統選單資訊表格結束  **************************************************/
    
	/*****************************************   佈局模型開始  **************************************************/
	var viewport = new Ext.Viewport({
	    layout:'fit',
	    items:[{
			layout : 'border',
			items: [grid]
	    }]
	});
	/*****************************************   佈局模型結束  **************************************************/
});
/********************************************Ext入口函式，相當於java中的主函式結束********************************************/