jgGrid扩展 显示查询用时
来源:互联网 发布:gps数据采集仪器 编辑:程序博客网 时间:2024/06/05 05:17
想要在jgGrid每次查询和翻页的时候可以在pager的位置显示查询用时,查询时间。但是看了jgGrid的属性和方法中没有这个功能,那么就看看jgGrid源码中,如何添加显示查询用时吧。注意到其中的两个方法beginReq和endReq。beginReq是在获取数据的开始时调用的,endReq是在获取数据结束时调用的。那么就可以在这两个方法中写显示查询用时的功能。
1 .添加自定义按钮
用navButtonAdd在pager中添加添加自定义按钮。这里有一个技巧,添加的内容不一定是文本,也可以添加HTML内容。这里添加了两个span标签,其中显示查询用时的标签设置一个class,方便后面找到这个DOM。navButtonAdd的用法这里就不赘述了,应该都搜得到。
$(tableName).jqGrid('navButtonAdd', pageName, { caption: "<span>查询用时:</span><span class='query-time'>00:00:00</span>", buttonicon: "ui-icon-calculator", });
2.修改jquery.jqGrid.js
修改部分
beginReq = function() {ts.grid.hDiv.loading = true;if(ts.p.hiddengrid) { return;}$(ts).jqGrid("progressBar", {method:"show", loadtype : ts.p.loadui, htmlcontent: $.jgrid.getRegional(ts, "defaults.loadtext", ts.p.loadtext) });var $timer=$(ts.p.pager).find('.query-time')||{};ts.loadTime = (new Date()).getTime();if(typeof beginTimer==='function') beginTimer($timer,ts.id);},endReq = function() {ts.grid.hDiv.loading = false;$(ts).jqGrid("progressBar", {method:"hide", loadtype : ts.p.loadui });var $timer=$(ts.p.pager).find('.query-time') || {};$timer.loadTime =(new Date()).getTime() - ts.loadTime ;if(typeof beginTimer==='function')endTimer($timer,ts.id);},
3.设置定时器
用setInterval,每过一毫秒就修改一次查询用时的显示,让数据显示动态更新。查询完成的时候要清除定时器。但是这里要注意一点,setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害。所以用到beginReq和endReq系统时间的差值来修正查询用时。
/** * *created by cc, alter on 2017/11/14 * *//*use to show query time*/ var timerObj={}; function beginTimer($ele,id){ var count=0,minu=0,sec=0,persec=0; $ele.text("00:00:00"); var date = new Date(); if($ele["length"] > 0){ timerObj[id]=setInterval(function(){ count++; persec=count%1000; minu=Math.floor(count/60000); sec=Math.floor(count/1000)-60*minu; if(sec<10) sec='0'+sec; if(minu<10) minu='0'+minu; $ele.text(minu+':'+sec+':'+persec); },1); } } function endTimer($ele,id){ if($ele["length"] > 0){ clearInterval(timerObj[id]); } $ele.loadTime = $ele.loadTime || 0; var date = new Date($ele.loadTime); var min = parseInt(date.getMinutes()); var sec = parseInt(date.getSeconds()); var milSec = parseInt(date.getMilliseconds()); $ele.text((min<10?("0"+min):min)+":"+(sec<10?("0"+sec):sec)+':'+milSec); }
阅读全文
0 0
- jgGrid扩展 显示查询用时
- 查询SQL用时
- jGgrid设置垂直滚动条以及显示高度
- 使用jggrid时与具体ORM实现无关的分页参数及查询结果封装.
- jgGrid显示数据,属性,多重表头,子表,行编辑,单元格编辑等实例
- mysqli扩展库增强-预处理mysqli_stmt 批量查询显示结果
- JgGrid 使用学习
- jgGrid 学习整理
- jgGrid的新增修改
- jggrid表格的使用
- jggrid带有参数
- 关于用时间模糊查询的三种方法
- SQL Server SQL查询用时 精确到毫秒
- mysql 用时间查询 今天,昨天,本月的数据
- 进入Android应用时显示LOGO图片的实现方法
- sphinx sphinxse 扩展系统列(Matchestotal、Matchesfound、Querymsec),显示匹配总行数、查询时间等
- mysqli扩展库操作mysql数据库 multi_querry一次性查询并显示
- 扩展hibernate的查询
- 框架综述
- CaaS“容器即服务”:是营销手段,还是有其价值?
- 匈牙利命名法类型前缀
- 可持久化线段树(主席树)学习笔记(1)
- python3安装和使用virtualenv
- jgGrid扩展 显示查询用时
- 使用纹理制作特效
- Java取整和随机数
- HDU 1039 Easier Done Than Said?(正则表达式)
- sql函数
- 洛谷 [P1220] 关路灯
- 容器部署解决方案Docker详解
- Hibernate的学习之路一(概念)
- Ibatis和Mybatis的差异性