1、使用EasyUI可以很方便的异步构建树，构建树时需要在数据库上添加一些必须的字段。经过测试，必须的字段包括id，text，state，由于动态构建树，需要知道响应的父节点，所以还需要pid字段。
其中，如果是父节点，那么state字段的值应该为closed，叶节点为open。
具体在EasyUI官网有说明：
节点state默认是open，当为state为close时表示有子节点，并且展开是会异步加载数据，所以需要在数据库中将父节点state标识位closed。
2、系统持久层框架使用Mybatis时，如果传入参数是Integer、Long、String等简单的对象，并且在mapper.xml中使用 if -- test 或者 choose -- when --- test对参数进行判断，需要在对应的接口方法参数上添加@param注解，或者将判断中的参数改为_parameter，
否则将会出现类似"There is no getter for property named 'pid' in 'class java.lang.String'"这样的异常。
如图两种颜色的搭配是ok的。
1 public interface MenuMapper extends MyMapper<Menu> { 2 // List<Menu> getMenuByPid(@Param("pid") Integer pid); 3 List<Menu> getMenuByPid(Integer pid); 4 } 5 6 7 <select id="getMenuByPid" resultMap="BaseResultMap"> 8 select id, pid, text, url, menu_order, state 9 from menu 10 <where> 11 <choose> 12 <!--<when test="pid != null and pid != ''">--> 13 <when test="_parameter != null and _parameter != ''"> 14 and pid = #{pid} 15 </when> 16 <otherwise> 17 and pid is null 18 </otherwise> 19 </choose> 20 21 </where> 22 </select>
EasyUI简单异步tree示例：
easyui-tree.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>easyui-tree</title> 6 <link rel="stylesheet" href="../static/easyui/themes/icon.css"> 7 <link id="themeName" rel="stylesheet" href="../static/easyui/themes/default/easyui.css"> 8 9 </head> 10 <body> 11 12 <ul id="menu" class="easyui-tree" data-options="url : 'getMenuByPid'" ></ul> 13 14 15 <script src="../static/easyui/jquery.min.js"></script> 16 <script src="../static/easyui/jquery.easyui.min.js"></script> 17 <script src="../static/easyui/locale/easyui-lang-zh_CN.js"></script> 18 19 </body> 20 </html>
menu.sql
1 SET FOREIGN_KEY_CHECKS=0; 2 3 -- ---------------------------- 4 -- Table structure for menu 5 -- ---------------------------- 6 DROP TABLE IF EXISTS `menu`; 7 CREATE TABLE `menu` ( 8 `id` bigint(20) NOT NULL AUTO_INCREMENT, 9 `pid` bigint(20) DEFAULT NULL, 10 `text` varchar(100) DEFAULT NULL, 11 `url` varchar(100) DEFAULT NULL, 12 `menu_order` smallint(10) DEFAULT NULL, 13 `state` varchar(50) DEFAULT NULL, 14 PRIMARY KEY (`id`) 15 ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8; 16 17 -- ---------------------------- 18 -- Records of menu 19 -- ---------------------------- 20 INSERT INTO `menu` VALUES ('1', null, '首页', null, null, 'closed'); 21 INSERT INTO `menu` VALUES ('2', '1', '系统管理', null, null, 'closed'); 22 INSERT INTO `menu` VALUES ('3', '2', '菜单管理', null, null, 'open'); 23 INSERT INTO `menu` VALUES ('4', '2', '角色管理', null, null, 'open'); 24 INSERT INTO `menu` VALUES ('5', '2', '权限管理', null, null, 'open'); 25 INSERT INTO `menu` VALUES ('6', '2', '用户管理', null, null, 'open');
Menu.java
1 public class Menu implements Serializable { 2 @Id 3 @GeneratedValue(strategy = GenerationType.IDENTITY) 4 private Long id; 5 6 private Long pid; 7 8 private String text; 9 10 private String url; 11 12 @Column(name = "menu_order") 13 private Short menuOrder; 14 15 private String state; 16 17 private static final long serialVersionUID = 1L; 18 19 // set get 20 }
MenuMapper.java
1 public interface MenuMapper extends MyMapper<Menu> { 2 List<Menu> getMenuByPid(Integer pid); 3 }
MenuMapper.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 3 <mapper namespace="com.easyui.dao.MenuMapper"> 4 <resultMap id="BaseResultMap" type="com.easyui.entity.Menu"> 5 <!-- 6 WARNING - @mbg.generated 7 --> 8 <id column="id" jdbcType="BIGINT" property="id" /> 9 <result column="pid" jdbcType="BIGINT" property="pid" /> 10 <result column="text" jdbcType="VARCHAR" property="text" /> 11 <result column="url" jdbcType="VARCHAR" property="url" /> 12 <result column="menu_order" jdbcType="SMALLINT" property="menuOrder" /> 13 <result column="state" jdbcType="VARCHAR" property="state" /> 14 </resultMap> 15 16 17 <select id="getMenuByPid" resultMap="BaseResultMap"> 18 select id, pid, text, url, menu_order, state 19 from menu 20 <where> 21 <choose> 22 <when test="_parameter != null and _parameter != ''"> 23 and pid = #{pid} 24 </when> 25 <otherwise> 26 and pid is null 27 </otherwise> 28 </choose> 29 30 </where> 31 </select> 32 </mapper>
service 层
1 public interface MenuService { 2 3 List<Menu> getMenuByPid(Integer pid) throws Exception; 4 } 5 6 7 @Service 8 public class MenuServiceImpl implements MenuService { 9 @Autowired 10 private MenuMapper menuMapper; 11 @Override 12 public List<Menu> getMenuByPid(Integer pid) throws Exception { 13 return menuMapper.getMenuByPid(pid); 14 } 15 }
MenuController.java
1 @Controller 2 @RequestMapping("/menu") 3 public class MenuController { 4 @Autowired 5 private MenuService menuService; 6 7 @RequestMapping("/") 8 public String getMenu(){ 9 return "easyui-tree"; 10 } 11 12 @RequestMapping("/getMenuByPid") 13 @ResponseBody 14 public List<Menu> getMenuByPid(@RequestParam(name = "id",required = false) Integer pid){ 15 try { 16 List<Menu> menus = menuService.getMenuByPid(pid); 17 System.out.println("success"); 18 return menus; 19 } catch (Exception e) { 20 e.printStackTrace(); 21 System.out.println("fail"); 22 return null; 23 } 24 } 25 }
页面图
