jgGrid扩展 显示查询用时

          想要在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);
     }