EasyUI Sping MVC 树形网格 Treegrid 简单实例

JAP视图展示

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <%@page language="java" contentType="text/html;charset=GBK" %>
 3 <html lang="en">
 4 <head>
 5     <meta charset="GBK">
 6     <title>TreeGrid with Footer - jQuery EasyUI Demo</title>
 7     <link rel="stylesheet" type="text/css" href="/th/js/jquery-easyui-1.4.1/themes/default/easyui.css">
 8     <link rel="stylesheet" type="text/css" href="/th/js/jquery-easyui-1.4.1/themes/icon.css">
 9     <link rel="stylesheet" type="text/css" href="/th/js/jquery-easyui-1.4.1/demo/demo.css">
10     <script type="text/javascript" src="/th/js/jquery-easyui-1.4.1/jquery.min.js"></script>
11     <script type="text/javascript" src="/th/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
12 </head>
13 <body>
14 <!-- one level-->
15 <table id="tg" class="easyui-treegrid" title="My Title" style="900px;height:450px"
16        data-options="
17                 rownumbers: true,
18                 animate: true,
19                 collapsible: true,
20                 fitColumns: true,
21                 idField: 'id',
22                 treeField: 'name',
23                 pagination:true,
24                 singleSelect:true,
25                 pageSize: 5,
26                 pageList: [5,10,20]
27             ">
28     <thead>
29     <tr>
30         <th data-options="field:'name',180">任务名称</th>
31         <th data-options="field:'persons',60,align:'right'">人员</th>
32         <th data-options="field:'begin',80">开始日期</th>
33         <th data-options="field:'end',80">结束日期</th>
34         <th data-options="field:'progress',120">进度</th>
35     </tr>
36     </thead>
37 </table>
38 <script type="text/javascript">
39     $(function () {
40         var $treeTab = $('#tg');
41         $treeTab.treegrid({
42             url: '/th/easyUI/secondLevel.action',
43             onBeforeExpand: function (row) {//在点击展开节点之前触发
44 
45                 var url = "/th/easyUI/secondLevel.action";
46                 $treeTab.treegrid("options").url = url;
47                 return true;
48             },
49             onBeforeLoad: function (row, param) {//当展开一个行节点时，'id' 值是大于 0 的。 当改变页码时，'id' 值应该被设置为 0 来放置加载子行
50                 alert(row);
51                 if (!row) {
52                     param.id = null;
53                 }
54             }
55         });
56     });
57 
58 </script>
59 </body>
60 </html>

JSP

SPRING MVC 后台功能实现

 1 @RequestMapping(value = "secondLevel")
 2     @ResponseBody
 3     public Object secondLevel(@RequestParam(value = "id", required = false) String id,
 4                               @RequestParam Integer page, @RequestParam Integer rows) {
 5 
 6         //id为空位根节点，不为空可打开子节点
 7 
 8         String idSql = StringUtil.isEmptyString(id) ? " is null " : " = " + id;
 9 
10         String strSql = "select t.id id,t.name name,t.begin begin,t.end end,t.progress progress," +
11                 "decode(t.parentid,null,'closed','open') state " +
12                 ",t.parentid "_parentId",t.PERSONS persons from it  t where t.parentid " + idSql;
13 
14 
15         if (StringUtil.isEmptyString(id)) {
16             strSql = setPageSql(strSql, page, rows);
17         }
18 
19         String countSql = "select count(*) from it t where t.parentid is null";
20 
21         String personsSql = "select sum(PERSONS) from it t";
22 
23         int count = jdbcTemplate.queryForInt(countSql);
24         int persons = jdbcTemplate.queryForInt(personsSql);
25         Map map = new HashMap();
26 
27         try {
28             if (count > 0) {
29                 List<TreeBean> treeBeans =
30                         jdbcTemplate.query(strSql, BeanPropertyRowMapper.newInstance(TreeBean.class));
31                 //total
32                 map.put("total", count);
33                 //rows
34                 map.put("rows", treeBeans);
35                 //footer
36                 List<Map<String, Object>> footer = new ArrayList<Map<String, Object>>();
37                 Map footermap = new HashMap();
38                 footermap.put("name", "总人数");
39                 footermap.put("persons", persons);
40                 footermap.put("iconCls", "icon-sum");
41                 footer.add(footermap);
42                 map.put("footer", footer);
43             }
44         } catch (Exception ex) {
45             ex.printStackTrace();
46         }
47         return map;
48     }

JAVA

BEAN对象

1     private Long id;
2     private String name;
3     private String begin;
4     private String end;
5     private String progress;
6     private String _parentId;
7     private String persons;
8     private String state;