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="width: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',width:180">任务名称</th> 31 <th data-options="field:'persons',width:60,align:'right'">人员</th> 32 <th data-options="field:'begin',width:80">开始日期</th> 33 <th data-options="field:'end',width:80">结束日期</th> 34 <th data-options="field:'progress',width: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>
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 }
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;