今天接到一个bug:初次进入页面easyui-datagrid加载出第一页的数据,点击下一页的时候不是到第二页而是到最后一页。
如下图所示:
这个bug确实让我很郁闷,最初以为是后台的问题,调试了一会儿发现跟后台没关系。
随后检查了下js代码,我的datagrid js是这样写的:
$('#xxTable').datagrid({
pageNumber : $("#pageNo").val(),
loadMsg:'数据加载中,请稍后...',
pageList:[10], //设置每页显示多少条
//查询条件
queryParams:{
"userName":userName,
"startTime":startTime,
"endTime":endTime,
"conditionDto_levelId":conditionDto_levelId,
"conditionDto_stateId":conditionDto_stateId,
"companyName":companyName,
},
onLoadError:function(){
alert('数据加载失败!');
},
onClickRow:function(rowIndex, rowData){
//取消选择某行后高亮
$('#infoMemberTable').datagrid('unselectRow', rowIndex);
},
onLoadSuccess:function(){
//保存当前页码到hidden标签中
setPageNumber();
}
}).datagrid('acceptChanges') ;
上面datagrid的pageNumber是从hidden标签中取得值,经过alert($("#pageNo").val()),初次进入页面时,弹出的值确实是“1”。(注:之所以pageNumber : $("#pageNo").val()是为了保护用户输入)。
找了半天没结果,我索性把pageNumber : $("#pageNo").val()改成pageNumber : 1,结果让我大跌眼镜:bug消失了!
我非常纳闷:pageNumber : $("#pageNo").val()向后台传的值是1,而pageNumber : 1向后台传的值也是1,两者完全没区别,但为什么后者点下一页就不会跳到最后一页呢?
最后经过同事提醒:是不是js数据类型问题。我随后把代码改成这样:pageNumber : parseInt($("#pageNo").val())。ok,bug消失了,原来$("#pageNo").val()是一个万恶的字符串“1”,pageNumber只接收整数,无法识别字符串没结果造成了刚才的问题。
经过上面的排查,我大概猜想easyui的整个运行过程:
第一次向后台发送请求时,datagrid会获取pageNumber中的值,并且把pageNumber的值保存起来。
用户点击下一页的时候,datagrid会使pageNumber+1然后把数据向后台发送,但是正如上面所说:如果遇到$("#pageNo").val()存的是一个字符串“1”,结果“1”+1会是一个字符串而不是一个整数,此时datagrid没法识别,就选择获得最后一页的数据。
- 大小: 35.5 KB
分享到:
相关推荐
easyui-datagrid之间拖拽效果demo
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
easyui-datagrid2-demo.zip
Spring Boot 系列教程 EasyUI-datagrid
easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip easyui\easyui-datagrid14-demo.zip easyui\easyui-datagrid15-demo....
easyui-datagrid21-demo.zip
easyui-datagrid导出至Excel插件,中文没有乱码问题。
个人收藏的插件,jquery-easyui-datagrid,分享给大家。
easyui-datagrid官方demo,包含datagrid中combobox的使用方法,以及选择行,删除行,编辑行等实现方法。浏览器直接打开html可能无法访问他的data/datagrid_data.json里的数据,可以将datagrid_data.json里的数据放到...
用于myeclipse软件下ssm框架 easyUIdatagrid增删改查
easyui-datagrid、edtabledatagrid ,行内编辑
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
最近在用jquery做页面,当datagrid放置数字文本框时输入小数会自动四舍五入,然后加了小数位数限制时不能输入小数点了。 最后发现是easyui1.4的bug,把这个补丁引入进去就好了
本资源主要是使用easyui控件,并结合ASP。net实现datagrid与数据库的连接,数据的增,删,改,分页操作,完成tree加载数据库数据,希望对开发初学者有所帮助
详细讲解Easyui中datagrid控件,编辑模式。扩展编辑器以及扩展验证规则。
easyui的datagrid中editor和combogrid的结合使用,datagrid中编辑项是下拉表的实现方式
项目工具代码,中间包含了service和controller两层,model可以自己定义
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
我自己将EASYUI官网里datagrid中的编辑表格和过滤表格两个demo合成的一个demo,供大家参考使用,下载解压后直接打开html即可,版本是easyui1.5
JS EasyUI DataGrid动态加载数据