Easyui datagrid小结

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