
代码:
页面访问数据的部分
$(function (){
$('#dg').datagrid({
url:'tableController.do?getTable&field=itemid,productid,listprice,unitcost,attr1,status',
singleSelect:true,
collapsible:true,//收起表格的内容
width: 700,
height: 450,
loadMsg: '数据加载中...',
singleSelect:true,
fitColumns:true,
rownumbers: true,//显示行数
idField: 'itemid',
pagination:true,//显示分页
pageSize:20,
pageNumber:1,
pageList:[20,40,60,80,100],
columns:[[
{field:'',title:'95598账目计算表',colspan:6,align:'center',height:30}
],[
{field:'itemid',title:'部门名称',rowspan:2,align:'center'},
{field:'',title:'统计各部门的账目总和:50亿美元',colspan:5,align:'right'}
],[
{field:'productid',title:'目录',width:100,align:'center'},
{field:'listprice',title:'部门一',width:100,align:'center'},
{field:'unitcost',title:'部门二',width:100,align:'center'},
{field:'attr1',title:'部门三',width:100,align:'center'},
{field:'status',title:'部门四',width:100,align:'center'}
]],
onLoadSuccess: function (data) {
if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格
mergeCellsByField("dg", "itemid"); // 重新载入当前页面数据
setTimeout("$('#dg').datagrid('reload');",5000);
}
}
});
$('#dg').datagrid('getPager').pagination({
beforePageText:'',
afterPageText:'/{pages}',
displayMsg:'{from}-{to}共 {total}条',
showPageList:true,
showRefresh:true,
onBeforeRefresh:function(pageNumber, pageSize){
$(this).pagination('loading');
$(this).pagination('loaded');
}
});/**
* EasyUI DataGrid根据字段动态合并单元格
* 参数 tableID 要合并table的id
* 参数 colList 要合并的列,用逗号分隔(例如:”name,department,office”);
*/
function mergeCellsByField(tableID, colList) {
var ColArray = colList.split(",");
var tTable = $("#" + tableID);
var TableRowCnts = tTable.datagrid("getRows").length;
var tmpA;
var tmpB;
var PerTxt = "";
var CurTxt = "";
var alertStr = "";
for (j = ColArray.length - 1; j >= 0; j--) {
PerTxt = "";
tmpA = 1;
tmpB = 0;
for (i = 0; i <= TableRowCnts; i++) {
if (i == TableRowCnts) {
CurTxt = "";
} else {
CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
} if (PerTxt == CurTxt) {
tmpA += 1;
} else {
tmpB += tmpA;
tTable.datagrid("mergeCells", {
index: i - tmpA,
field: ColArray[j], //合并字段
rowspan: tmpA,
colspan: null
});
tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
index: i - tmpA,
field: "Ideparture",
rowspan: tmpA,
colspan: null
});
tmpA = 1;
}
PerTxt = CurTxt;
}
}
}后端模拟的数据,只要前台能够收到数据,将最基本的表格显示出来,调用mergeCellsByField(tableID, colList)
即可,他是将数据加载完成之后在进行单元格合并的。数据只是为了测试是否能够正确显示
/**
*
* 测试显示表格内容的方法
* @return
*/
@RequestMapping(params = "getTable")
public void getTable(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) {
List










