easyui datagrid 实现鼠标滚动翻页效果(不是点击下一页)
2017-10-12 09:50
465 查看
js代码如下:
其中’#dgairbox’为表格的id
var s1 = new Date().getTime(); $(document).ready(function(){ var flag = true; //鼠标滑轮滚动事件的处理 var scrollFunc=function(e){ var s2 = new Date().getTime(); console.log(s2); if(s2-s1<500) return;//控制滚轮滑动翻页的时间差 var direct=0; e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(flag){ s1 = new Date().getTime(); pageTurring(e.wheelDelta); }else{ flag = true; } }else if(e.detail){//Firefox s1 = new Date().getTime(); pagepageTurringFirefox(e.detail); } // ScrollText(direct); }; //注册事件 if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); } window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome //其他浏览器翻页,根据参数的进行翻页(负数为下一页,) function pageTurring(e){ flag = false; var grid = $('#dgairbox'); var options = grid.datagrid('getPager').data("pagination").options; var pageNum = options.pageNumber;//当前页数 var total = options.total; var max = Math.ceil(total/options.pageSize); if(e<0){ $('#dgairbox').datagrid('gotoPage', { page: pageNum+1 > max ? 1:pageNum+1, callback: function(page){ // console.log(page); } }); }else if(e>0){ $('#dgairbox').datagrid('gotoPage', { page: pageNum-1 <= 0 ? max:pageNum-1, callback: function(page){ //console.log(page); } }); } } //火狐翻页,根据参数的进行翻页(正数为下一页,) function pagepageTurringFirefox(e){ var grid = $('#dgairbox'); var options = grid.datagrid('getPager').data("pagination").options; var pageNum = options.pageNumber;//当前页数 var total = options.total; var max = Math.ceil(total/options.pageSize); if(e>0){ $('#dgairbox').datagrid('gotoPage', { page: pageNum+1 > max ? 1:pageNum+1, callback: function(page){ // console.log(page); } }); }else if(e<0){ $('#dgairbox').datagrid('gotoPage', { page: pageNum-1 <= 0 ? max:pageNum-1, callback: function(page){ //console.log(page); } }); } } });
其中’#dgairbox’为表格的id
相关文章推荐
- 原生js实现鼠标点击效果(不是真实鼠标点击,用js模拟鼠标点击,类似jquery trigger效果)
- css实现点击滚动翻页的效果(无js)
- 纯CSS实现点击滚动翻页的效果
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
- JS实现响应鼠标点击动画渐变弹出层效果代码
- JS响应鼠标点击实现两个滑块区间拖动效果
- JS实现鼠标经过用户头像显示资料卡的效果,可点击
- jQuery实现鼠标滚动图片延迟加载效果附源码下载
- JQuery------实现鼠标点击和滑动不同效果
- 使用OpenLayers实现一个在鼠标点击处添加标记的效果
- JS实现“鼠标控制局部文字滚动效果”研究
- jQuery实现响应鼠标滚动的动感菜单效果
- js实现鼠标点击左上角滑动菜单效果代码
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- JavaScript实现鼠标点击后层展开效果的方法
- jquery实现鼠标点击后展开列表内容的导航栏效果
- jquery实现的鼠标下拉滚动置顶效果
- 使用 HorizontalScrollView 实现水平滚动,并点击有相应的反应效果
- 使用python selenium TouchAction模拟实现lCalendar滚动和点击效果
- JS实现网页游戏中滑块响应鼠标点击移动效果