Easyui中datagrid分页问题:记录数pageSize,当前页号,最大页号在IE下均为NaN的问题

easyui中datagrid每页记录数pageSize,当前页号,最大页号在IE下均为NaN的问题

我的运行环境是
jquery.easyui.min.js 版本1.3.2。
jquery-1.8.0.js
浏览器版本是IE8。

datagrid的options部分设置如下:
  pagination:true,
  pageNumber: 1,
  pageSize: 10,
  pageList: [ 10, 20, 40, 80], 

【问题1】:-----------------------------

我遇到的第个问题是后台解析时获取到的rows参数(也就是pageSize)是NaN,这也导致了后台异常
此问题只有在IE8浏览器的标准模式出现,换用其它浏览器正常,IE中使用Quirks模式也正常
有时候我们无法改变用户的使用习惯只能自己想办法解决问题。

我手上只有min.js,代码阅读狠扳,我也无法获取easyui的源码
所以我最开始想到的是只好去后台Spring做修改,在网上找到了一个过滤器方案
于是我加了一个过滤器ModifyParametersFilter,在getParameterValues函数中检查了rows参数,
如果是NaN,就改成10,这样就在后台解决了异常问题。
具体做法参考 https://blog.csdn.net/jj_nan/article/details/76038049

这样后台没异常了,数据可以传递到前台datagrid了

【问题2】:-----------------------------

表格有数据以后,发现表格的分页显示还是不正常:
显示:NaN到NaN,共43记录,而且上一页和下一页按钮也点击不了。

猜想可能是因为pageSize参数在本地仍然是NaN的,导致无法计算当前页面记录起止号码。
没办法,硬着头皮看jquery.easyui.min.js。
其实代码没有想象的那么乱,于是我仔细找pageSize在哪里取的,找到如下位置:

_85.pageSize=parseInt(ps.val());

这里val()返回是NaN,结合查看浏览器HTML代码:
<option>10</option>
<option>20</option>
这和我们平时看到不一致,为啥option标签里面没有value属性?
于是我检查生成option的代码:
for(var i=0;i<_78.pageList.length;i++){
	$("<option></option>").text(_78.pageList[i]).appendTo(ps);
}
原来easyui开发者只设置了text,没有设置val,这不太规范,修改如下:
for(var i=0;i<_78.pageList.length;i++){
	$("<option></option>").text(_78.pageList[i]).val(_78.pageList[i]).appendTo(ps);
}
然后浏览器的html就变成:
<option value=10>10</option>
<option value=20>20</option>
这样后台IE就不会再得到NaN了,分页显示也正常了

所以,根本原因是jquery在部分IE下必须有value属性才能用val()取得值。
而FF或者chrome则可以在option无value的情况下运行良好

【问题3】:----------------------------------------------

随即又发现另外一个问题,初始化每页10条记录,但实际上变成了可选pageSize的最大值80条。
就算手动改变select下拉框选择10,也会立刻变成80。


我用console.log输出pageSize的值,追踪是哪里10变成了80,一直查到 _82() 函数,里面有一段代码:
if(ps.length){
	ps.val(_85.pageSize+"");
	_85.pageSize=parseInt(ps.val());
}
此处_85是datagrid的配置options。
在ps.val()函数的前后_85.pageSize发生了变化,
ps.val()前不管设置为什么值10,20,40,80,而ps.val()执行后最后都变成最大值80。
ps就是PageSelect的意思,也就是$(下拉框)生成的jquery对象。
因此我判断是ps.val函数出错了,是jquery在IE下的造成的问题,所以改用原生js应该不会有错。

所以我用 ps[0].value=_85.pageSize; 代替 ps.val(_85.pageSize+"");

至此表格所有问题得到解决。
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值