jqGrid应用SpringMVC以及分组汇总-不分页

jsp

导入JS/CSS:

<link rel="stylesheet" type="text/css" media="screen" href="scripts/jquery.jqGrid-4.6.0/css/ui.jqgrid.css" />

<script src="scripts/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="scripts/jquery.jqGrid-4.6.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="scripts/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src.js" type="text/javascript"></script>

<table style="width: 100%;height: 100%;" id="list"></table>

js脚本

jQuery(function($) {

$("#list").jqGrid({
  url:"report_hz_json",
datatype: "json",
mtype: 'POST', 
width : 950,
height : 400,

  colNames:['类型','序号','项目编号','项目名称','项目编号',"建设单位","成本投入","资本投入","价值分类","专业分类",
           "立项批次","技术负责","立项时间","计划完成时间"],
  colModel:[
                {name:'type',index:'type', width:30, align:"center",hidden:true,editable:true},
                {name:'sortNo',index:'sortNo', width:80, align:"center"},
                {name:'id',index:'id', width:30, align:"center",hidden:true},
  {name:'name',index:'name', width:200, align:"center",formatter:hrefName},
  {name:'projectNumber',index:'projectNumber', width:150, align:"center"},
  {name:'proposeDepartment',index:'proposeDepartment', width:120, align:"center"},
  {name:'budget',index:'budget', width:80, align:"right", sorttype:'number',formatter:'number',summaryType:'sum'},
  {name:'investment',index:'investment', width:80, align:"right", sorttype:'number',formatter:'number',summaryType:'sum'},
  {name:'keyTask',index:'keyTask', width:120, align:"center"},
  {name:'techCategory',index:'techCategory', width:120, align:"center"},
  {name:'batch',index:'batch', width:60, align:"center"},
  {name:'relatedBoss',index:'relatedBoss', width:60, align:"center"},
  {name:'startTime',index:'startTime', width:120, align:"center"},
  {name:'plannedDate',index:'plannedDate', width:120, align:"center"}
  ],
  viewrecords: true,
         grouping:true,
         groupingView : {
     groupField : [ 'type' ], 
     groupColumnShow : [ false ],
     groupText : [ '<b>{0} - {1} 条记录</b>' ],
     groupCollapse : false,
     groupDataSorted : true,
     groupOrder : [ 'asc' ],//
     groupSummary : [ true ],
     showSummaryOnHide : true
      }, 

});

Controller返回Map集合组成的JSON数据

@RequestMapping(value = "/report_hz_json")
public @ResponseBody Map<String, Object> getHZData_Json(Model model) {
Map<String, Object> map = null;
List<Map<String, Object>> listMap = new ArrayList<Map<String,Object>>();
List list = reportService.getListByHql(" from Project order by proposeDepartment");
for (int i = 0; i < list.size(); i++) {
Project project = (Project)list.get(i);
map = new HashMap<String, Object>();
map.put("sortNo", i+1);
map.put("id", project.getId());
map.put("name", project.getName());
map.put("projectNumber", project.getProjectNumber());
map.put("proposeDepartment", project.getProposeDepartment());
if (project.getRequirement() != null) {
map.put("budget", project.getRequirement().getBudget());
map.put("investment", project.getRequirement().getInvestment());
map.put("plannedDate", project.getRequirement().getPlannedDateString());
}else {
map.put("budget", "0");
map.put("investment", "0");
map.put("plannedDate", "");
}
map.put("keyTask", project.getKeyTask());
map.put("techCategory", project.getTechCategory());
if (project.getInitialization() != null) {
map.put("batch", project.getInitialization().getProjectBatch());
map.put("startTime", project.getInitialization().getStartTime());
}else {
map.put("batch", "第一批");
map.put("startTime", "");
}
map.put("relatedBoss", project.getRelatedBoss());

if ("企业信息化部".equals(project.getProposeDepartment())) {
map.put("type", "企业信息化部");
}else {
map.put("type", "其他");
}
listMap.add(map);
}

map = new HashMap<String, Object>();
map.put("rows", listMap);
return map;
}

切记：若要分组正确，请先将Controller返回的JSON数据按照分组的字段排序。如有相关问题可加群咨询：135430763

运行效果：