1、出现 ‘Rowspan’ 为空或不是对象异常是因为 $('#dg').datagrid({ 、、、、、}); 中 某个位置多写了 逗号, 仔细检查一下。
误区:并非是网上所说的 “操作”的跨行,一定要带上field:’opt’
2、JQuery EasyUI datagrid 复杂表头处理,并且解决数据垂直居中问题
代码如下:
$('#statiEpDataList').datagrid({
title: '行业数据统计',//标题
url: url,//链接
iconCls: 'icon-ok',//图标
nowrap: false,//设置为true,当数据长度超出列宽时将会自动截取
striped: true,//设置为true将交替显示行背景
fit: true,//自动带下
fitColumns: true, //自适应列宽
remoteSort: false,//定义是否通过远程服务器对数据排序
idField:'taskId',//表明该列是一个唯一列
singleSelect: true,//是否单选
pagination: true,//分页控件
rownumbers: true,//行号
columns:[[
{field:'statDate',title:'统计月份',align:'center',width:60,colspan:1,rowspan:4,styler: tdStyle},
{title:'用户',align:'center', width:120, colspan:1,rowspan:1},
{title:'业务使用量',align:'center',width:600, colspan:4,rowspan:1},
{title:'运行质量',align:'center', width:600, colspan:4,rowspan:1}
],[
{field:'epCount',title:'企业客户数',align:'center',width:120,colspan:1,rowspan:3,styler: tdStyle},
{field:'upCount1',title:'由行业短信网关到EC/SP<br/>上行短信总条数',align:'center',width:150,colspan:1,rowspan:3,styler: tdStyle},
{field:'downCount1',title:'由EC/SP到行业短信网关<br/>下行短信总条数',align:'center',width:150,colspan:1,rowspan:3,styler: tdStyle},
{field:'downCount2',title:'由行业短信网关到短信中心<br/>下发短信总条数',align:'center',width:150,colspan:1,rowspan:3,styler: tdStyle},
{field:'upCount2',title:'由短信中心到行业短信网关<br/>上行短信总条数',align:'center',width:150,colspan:1,rowspan:3,styler: tdStyle},
{field:'upSucRate1',title:'到EC/SP短信<br/>上行成功率',align:'center',width:100,colspan:1,colspan:1,rowspan:3,styler: tdStyle},
{field:'downSucRate1',title:'EC/SP短信<br/>下行成功率',align:'center',width:100,colspan:1,colspan:1,rowspan:3,styler: tdStyle},
{field:'upSucRate2',title:'短信中心<br/>上行短信成功率',align:'center',width:100,colspan:1,colspan:1,rowspan:3,styler: tdStyle},
{field:'downSucRate2',title:'向短信中心<br/>下发短信成功率',align:'center',width:100,colspan:1,colspan:1,rowspan:3,styler: tdStyle}
]],
onLoadSuccess:function(data){
//获取表头div
$('td[field=statDate] div').css({'height':36});
$('td[field=epCount] div').css({'height':36});
$('td[field=upCount1] div').css({'height':36});
$('td[field=downCount1] div').css({'height':36});
$('td[field=downCount2] div').css({'height':36});
$('td[field=upCount2] div').css({'height':36});
$('td[field=upSucRate1] div').css({'height':36});
$('td[field=downSucRate1] div').css({'height':36});
$('td[field=upSucRate2] div').css({'height':36});
$('td[field=downSucRate2] div').css({'height':36});
}
①复杂表头如上,
②会出现数据位置偏移,
所以重新获取了表头的div,重新设置各个td的height,
并且加了个styler: tdStyle来设置数据显示的位置,
(原因:1、在field加载时设置height:36会则无效,只能在数据加载完毕后重新设置)
field:'statDate',title:'统计月份',align:'center',width:60,height:36,colspan:1,rowspan:4,styler: tdStyle
)
tdStyle代码如下:
var tdStyle=function(value,row,index){
return 'margin: 0 auto;vertical-align: middle; padding-top:18px;';
}
显示结果如下:
参考资料:
JQuery easyUi datagrid 中 改变行背景色 http://blog.csdn.net/tianlincao/article/details/7529048
JQuery EasyUI datagrid 复杂表头处理 http://www.cnblogs.com/szytwo/archive/2012/09/18/2691420.html
解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题 http://blog.csdn.net/a9529lty/article/details/8640466