您现在的位置:首页 >> 前端 >> 内容

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

时间:2018/6/26 15:38:29 点击:

  核心提示:easyui中datagrid每页记录数pageSize,当前页号,最大页号在IE下均为NaN的问题我的运行环境是jquery.easyui.min.js 版本1.3.2。jquery-1.8.0.j...

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

我的运行环境是

jquery.easyui.min.js 版本1.3.2。

jquery-1.8.0.js

浏览器版本是IE8。

datagrid的options部分设置如下:

[javascript] view plain copy

pagination:true,  

pageNumber: 1,  

pageSize: 10,  

bsp; 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代码:

[html] view plain copy

<option>10</option>  

<option>20</option>  

这和我们平时看到不一致,为啥option标签里面没有value属性?

于是我检查生成option的代码:

[javascript] view plain copy

for(var i=0;i<_78.pageList.length;i++){  

    $("<option></option>").text(_78.pageList[i]).appendTo(ps);  

}  

原来easyui开发者只设置了text,没有设置val,这不太规范,修改如下:

[javascript] view plain copy

for(var i=0;i<_78.pageList.length;i++){  

    $("<option></option>").text(_78.pageList[i]).val(_78.pageList[i]).appendTo(ps);  

}  

然后浏览器的html就变成:

[html] view plain copy

<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() 函数,里面有一段代码:

[javascript] view plain copy

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+"");

至此表格所有问题得到解决。

Tags:EA AS SY YU 
作者:网络 来源:shutter75的