先贴个效果图：
用easyui-layout布局主框架，index.jsp内容如下：
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path ;%><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>家庭财务管理系统</title><link rel="stylesheet" type="text/css"href="<%=basePath%>/res/css/easyui/default/easyui.css"><link rel="stylesheet" type="text/css" href="<%=basePath%>/res/css/easyui/icon.css"><script type="text/javascript" src="<%=basePath%>/res/js/jquery.min.js"></script><script type="text/javascript" src="<%=basePath%>/res/js/jquery.easyui.min.js"></script><script type="text/javascript" src="<%=basePath%>/res/js/easyui-lang-zh_CN.js"></script><script>$(function(){$(‘#tabs’).tabs(‘add’,{title:’首页’,href:’main.jsp’,closable:false});$(‘.easyui-tree’).tree({onClick:function(node){}});});</script></head><body class="easyui-layout"><div data-options="region:’north’,noheader:true,split:false" style="height:66px;background:#FFFFCC"><h1>家庭财务管理系统</h1></div><div data-options="region:’south’,noheader:true,split:false" style="height:50px;"></div><div data-options="region:’west’,title:’菜单’,split:true" style="width:200px;"><div class="easyui-accordion" border="false">${menus}</div></div><div data-options="region:’center’," style="padding:1px;"><div class="easyui-tabs" data-options="fit:true,border:false"></div></div></body></html>布局是经典式布局，北南西中，北以后可以换成一个logo图片，西边放操作菜单，南边是copyright等，主内容区对应菜单点击后的各个页面，以tab来实现。
下面来看左菜单的实现。
package system.homebank.controller;import java.util.List;import javax.annotation.Resource;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import system.homebank.entity.Menu;import system.homebank.service.MenuService;import system.homebank.utils.MenuUtils;@Controllerpublic class HomePageController{ @Resource private MenuService service;@RequestMapping("/home.do") public String forward(Model model) {List<Menu> list = this.service.getAllMenu();String menus = MenuUtils.buildMenus(list);model.addAttribute("menus", menus);return "/index"; }}上面forward控制主页转向的，里面的代码主要是准备主页数据，暂时只准备左侧菜单数据，以后会有其他数据。
MenuService接口中主要提供菜单数据的读取。
MenuUtils.buildMenus(list)将菜单数据解析成html串。下面看MenuUtils.java：package system.homebank.utils;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import system.homebank.entity.Menu;import system.homebank.model.TreeNode;public class MenuUtils{ public static String buildMenus(List<Menu> menuList) {if (menuList == null){return null;}List<TreeNode> nodeList = new ArrayList<TreeNode>();for (Menu m : menuList){TreeNode treeNode = new TreeNode(m.getId(), m.getMenuname(),m.getUrl(), m.getParentid());nodeList.add(treeNode);}Map<String,TreeNode> map = new HashMap<String,TreeNode>();for (TreeNode node : nodeList){map.put(node.getId(), node);}List<TreeNode> ret = new ArrayList<TreeNode>();for (TreeNode node : nodeList){String id = node.getId();String parentid = node.getParentid();if (parentid.compareTo(id) == 0 ){ret.add(node);}else{TreeNode parentNode = (TreeNode)map.get(parentid);if (parentNode == null){throw new RuntimeException(String.format("节点%s的父节点%s没找到", node.getId(),parentid));}parentNode.addChild(node);}}return createHtml(ret); } private static String createHtml(List<TreeNode> list) {String result = "";String menu = "<div title=\&;%s\&; iconCls=\&;icon-ok\&; style=\&;padding:10px;\&;><ul class=\&;easyui-tree\&; data-options=’data:%s’></ul></div>";for (TreeNode o : list){result = result + String.format(menu, new Object[] { o.getText(), JSONBinder.buildNormalBinder().toJson(o.getChildren()) });}return result; }}上面用到了TreeNode结构，，TreeNode.java内容如下：package system.homebank.model;import java.io.Serializable;import java.util.ArrayList;import java.util.List;public class TreeNode implements Serializable{ private static final long serialVersionUID = 2235783844919124916L; private String id; private String text; private Attributes attributes; private String parentid; private List<TreeNode> children;public TreeNode() { } public TreeNode(Integer id, String text,String url, Integer parentid) {this.id = id.toString();this.text = text;this.attributes = new Attributes();this.attributes.setUrl(url);this.parentid = parentid.toString(); } public void addChild(TreeNode child) {if (this.children == null){this.children = new ArrayList<TreeNode>();}this.children.add(child); } public String getId() {return id; } public void setId(String id) {this.id = id; } public String getText() {return text; } public void setText(String text) {this.text = text; }public Attributes getAttributes() {return attributes; } public void setAttributes(Attributes attributes) {this.attributes = attributes; } public String getParentid() {return parentid; } public void setParentid(String parentid) {this.parentid = parentid; } public List<TreeNode> getChildren() {return children; } public void setChildren(List<TreeNode> children) {this.children = children; } }TreeNode表示一个树的节点，节点的附加信息放到Attribultes中，Attribultes中我暂时只放了url信息，当点击菜单时，根据url去向后台发送相应的请求。
以上为实现左菜单的主要代码。
我们大都接受的是正面的教育，
