程式碼：
頁面存取資料的部分
$(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中文網其他相關文章！
