代码：
页面访问数据的部分
$(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中实现表格的跨行跨列的方法的详细内容。