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

執行效果：