zoukankan      html  css  js  c++  java
  • 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;
  • 相关阅读:
    [数据结构]直接插入排序
    隐藏小程序scroll-view组件的滚动条
    当 uni-app 遇见 vscode
    npm(你怕吗) 全局安装与本地安装、开发依赖和生产依赖
    Vue-resource的使用
    spy-debugger调试、抓包工具
    一个小时学会Git
    flex布局踩过的坑
    Html5移动端布局及(rem布局)页面自适应布局详解
    使用vscode自动编译less
  • 原文地址:https://www.cnblogs.com/huanzei/p/5124890.html
Copyright © 2011-2022 走看看