代码：
页面访问数据的部分
$(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<Map<String, Object>> listResults=new ArrayList<Map<String,Object>>();
String[] str = {"满意数","不满意数","满意率","合计","部门的总共数","部门满意率"};
String[] item = {"满意度","消息","评价","总计"};
int j = 0;int k = 0;
try {
for (int i = 0; i < 24 ; i++) {
Map<String, Object> map = new HashMap<String, Object>(); if(i/6==j){ map.put("itemid", item[j]); map.put("productid", str[k]); map.put("listprice", new Random().nextInt(100)); map.put("unitcost", new Random().nextInt(100)); map.put("attr1", new Random().nextInt(100)); map.put("status", new Random().nextInt(100));
k++;
}else{
++j;
k=0;
map.put("itemid", item[j]);
map.put("productid", str[k]);
map.put("listprice", new Random().nextInt(100));
map.put("unitcost", new Random().nextInt(100));
map.put("attr1", new Random().nextInt(100));
map.put("status", new Random().nextInt(100));
k++;
}
listResults.add(map);
} int page = dataGrid.getPage();
int rows = dataGrid.getRows();
List<Map<String, Object>> listResultsEnd=new ArrayList<Map<String,Object>>();
for (int i = (page-1)*rows; i < page*rows; i++) {
if(listResults.size()>=(i+1)){
listResultsEnd.add(listResults.get(i));
}
}
dataGrid.setResults(listResultsEnd);
dataGrid.setTotal(listResults.size());
TagUtil.datagrid(response, dataGrid);
} catch (Exception e) {
e.printStackTrace();
}
}以上是jQuery easyUI中实现表格的跨行跨列的方法的详细内容。更多信息请关注PHP中文网其他相关文章！
