-----转载(IE8 下)
在最近所做的一个项目中,要求用jquey easyUi控件来做一个工资核算的展示页面,
展示的页面要求如下所示:
本来做这个datagrid的表头挺简单的,并且按部门名称进行合并,但是在分页的时候,由于表头是这边有分成两行,如果我们直接按照上面的格式进行js设计表头的话,在火狐和谷歌浏览器下面都可以正常的显示分页,但是在ie下面会报错而不能进行分页,打开ie调试会报
错误:SCRIPT5007: 无法获取属性“rowspan”的值: 对象为 null 或未定义,
造成这种错误的原因大致为:(1) 可能是在datagrid里面下的frozenColumns:[[ {......}]]或者是columns:[[{...},{...}]] {...}之间多一个逗号(,)
找了半天无果后,我参照http://blog.csdn.net/littlewolf766/article/details/7390341的错误进行改造columns,效果如下所示,可以正常的进行分页,改造代码如下
frozenColumns:[[
{title:'部门',field:'dept',width:185,align:'center',rowspan:2}
]],
columns:[[
{title:'月份',field:'month',width:100,align:'center',rowspan:2},
{title:'姓名',field:'name',width:100,align:'center',rowspan:2},
{title:'应补项目'},
{title:'企业应扣缴',colspan:7}
],[
{title:'小计',field:'ybxj',align:'center'},
{title:'养老(18%)',field:'qyyl',align:'center'},
{title:'失业(2%)',field:'qysy',align:'center'},
{title:'工伤(1%)',field:'qygs',align:'center'},
{title:'生育(0.7%)',field:'qysyu',align:'center'},
{title:'医保(7.5%)',field:'qyyb',align:'center'},
{title:'公积金(12%)',field:'qygjj',align:'center'},
{title:'小计',field:'qyxj',align:'center'}
] ]
在成功后,我又进行了进一步的改造,(原本以为是一行的不能放在两行合并的后面),但结果却发现不是这样,进一步改造的代码:
frozenColumns:[[
{title:'部门',field:'dept',width:185,align:'center',rowspan:2}
]],
columns:[[
{title:'月份',field:'month',width:100,align:'center',rowspan:2},
{title:'姓名',field:'name',width:100,align:'center',rowspan:2},
{title:'出勤工资',field:'cqgz',width:80,align:'center',rowspan:2},
{title:'应补项目'},
{title:'企业应扣缴',colspan:7},
{title:'工资保险合计(J+M+AI)',field:'gzbxhj',width:150,align:'center',rowspan:2},
{title:'',field:'unid',width:0,align:'center',hidden:'true'},
{title:'核算科目',field:'hskm',width:150,align:'center',rowspan:2},
{title:'人员性质',field:'ryxz',width:150,align:'center',rowspan:2},
],[
{title:'小计',field:'ybxj',align:'center'},
{title:'养老(18%)',field:'qyyl',align:'center'},
{title:'失业(2%)',field:'qysy',align:'center'},
{title:'工伤(1%)',field:'qygs',align:'center'},
{title:'生育(0.7%)',field:'qysyu',align:'center'},
{title:'医保(7.5%)',field:'qyyb',align:'center'},
{title:'公积金(12%)',field:'qygjj',align:'center'},
{title:'小计',field:'qyxj',align:'center'}
] ]
结果可以按照要求正确的分页了,效果如下:
但奇怪的是我以前也是按照上面的代码进行展示的,但是会报错,而改造之后就行了,思来想去,最可能是我刚开始的代码多了一个逗号,导致在ie下会报错
SCRIPT5007: 无法获取属性“rowspan”的值: 对象为 null 或未定义或者说错误为 ‘Rowspan’ 为空或不是对象异常是因为 $('#dg').datagrid({ 、、、、、}); 中某个位置多写了 逗号, 仔细检查一下。
误区:并非是网上所说的 “操作”的跨行,一定要带上field:’opt’,