关于EasyUI中异步Tree的构建

　　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 }

　　页面图