前端以列表形式實現數據展示，後端返回List<Object>對象後，前端js進行數據處理，此處使用前端框架爲MiniUi
page.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 此處引入MiniUi -->
</head>
<body>
<h2 class="title1"><span>列表</span></h2>
<div class="mini-fit">
<div class="mini-dataGrid mini-dataGrid-reset" id="list-grid" allowAlternating="true" pageSize="20" multiSelect="true" allowMoveColumn="false" allowSortColumn="false" showEmptyText="true" emptyText="暫無數據" style="width: 100%; height: 100%">
</div>
</div>
<script src="${contextPath}/resources/js/page.js"></script>
</body>
</html>
page.js
var onlineListGrid = {
grid: null,
init: function() {
mini.parse();
this.grid = mini.get('list-grid');
this.grid.setColumns(this.buildColumns());
this.grid.setUrl(contextPath + '/online-roster/page.html');// 後臺接口
this.loadGrid();
$('.mini-grid-pager').remove();//取消分頁
},
loadGrid: function() {
var me = this
this.grid.load({
jsonParam: me.getSearchForm()
}, function() {
// 1.根據學院進行分組
var datas = me.grid.getData();
var list = [];
var map = {};
$.each(datas,function(i,v){
var vst=datas[i];
if(!map[vst.yxsm]){
map[vst.yxsm]=new Array();
}
map[vst.yxsm].push(vst);
})
// 2.每個學院前添加一條數據
var xyList=[];
for( i in map){
var arr=[];
var valueList = map[i];
var obj = valueList[0];
arr.push({'yxsmc':obj.yxsmc,'rs':obj.rs});
var st = me.xhxy(map[i]);
xyList=xyList.concat(arr.concat(st));
}
me.grid.setData(xyList);
})
},
// 構造專業分組
xhxy:function(xy){
var zyMap={};
var zys=[];
$.each(xy,function(i,v){
var zy = xy[i];
if (!zyMap[zy.zydm]) {
zyMap[zy.zydm] = new Array();
}
zyMap[zy.zydm].push(zy);
});
// 每個專業第0條添加數據
for(i in zyMap){
var arr=[]
var zyObj=zyMap[i][0];
arr.push({'zymc':zyObj.zymc,'rs':zyObj.rs,'yxsm':zyObj.yxsm});
zys=zys.concat(arr.concat(zyMap[i]));
}
return zys;
},
buildColumns: function() {
var me = this
var column = [{
header: "學院、專業、研究方向",
field: "yxsmc",
allowSort: true,
width: "200",
name: 'yxsmc',
align: "center",
headerAlign: "center",
renderer: function(e) {
var v = e.record;
if (v.yjfxm) {
return v.yjfxm;
} else if (v.zydm) {
return "<a href='#'>" + v.zymc + "</a>";
}else {
return "<a href='#'>" + v.yxsmc + "</a>";
}
}
}, {
header: "學習方式",
field: "xxfs",
allowSort: true,
width: "35",
name: 'action',
align: "center",
headerAlign: "center"
},{
header: "人數",
field: "rs",
allowSort: true,
width: "50",
name: 'action',
align: "center",
headerAlign: "center",
renderer: function(e) {
var v = e.record;
if (v.yjfxm) {
return "";
}else if (zydm) {
return v.rs;
}
}
}]
return column
}
};
$(function() {
onlineListGrid.init();
});
最終效果
