jgGrid插件是非常常用的一个基于jQuery的表格插件,功能非常强大。我最近也频繁使用。但是这个插件也有一些不够完善的地方。比如这个getCol方法。

getCol方法接受三个参数 colname, returntype, mathoperation,返回一个数组( array类型)或一个值(数字或字符串类型)。

官方的使用说明是这样介绍的:这个方法返回一个包含列所对应的值的数组。colname可以是一个代表列的索引的数字,或者是一个colModel里面的name。returntype决定了返回的数组的类型,当设置为false(默认值)时数组只包含值,当设置成true时数组包含一组对象。 对象被定义为{ id:rowid,value:cellvalue } ,其中rowid表示是哪一行的id,cellvalue表示的是这一个单元格的值。 例如,输出可以是这样[{ id:1,value:1 },{ id:2,value:2 }…)]。mathoperation的有效选项是 'sum, 'avg', 'count'。 如果这个参数被设置了并且是有效的,就表示该操作的返回值是操作该列中的所有值之后得到的一个标量值。 如果该参数是无效的,那么返回值为空数组。官方使用说明参考此处链接。

我这里在补充一下,returntype设置为true时,返回的是该列的所有值的值对形式。mathoperation如果设置为‘sum’,返回该列中所有值的和,如果设置为‘avg’,返回该列中所有值的平均值,如果设置为‘count’,返回值为该列的数目。

再说一点,其实mathoperation的候选项不只这三个,另外还有‘min’和‘max’,对应的返回值分别是该列中的最小值和最大值。如果设置了有效的mathoperation ,那么返回的结果都是一个值而不是数组,即使你把returntype设置为true。

$jqGrid=$("#table");
var value1 = $jqGrid.getCol(colname,true);//返回包含该列所有值的数组
var value2 = $jqGrid.getCol(colname,true,'abs'); //mathoperation无效,返回包含该列所有值的数组
var value3 = $jqGrid.getCol(colname,false,'abs'); //mathoperation无效,返回空值
var value3 = $jqGrid.getCol(colname,false,'min');//返回该列最小值
var value3 = $jqGrid.getCol(colname,true,'min');//返回该列最小值

那么问题来了。在返回该列中的最小值和最大值(即mathoperation 设置为‘min’或‘max’ )的时候,我不仅需要知道值是多少,我还需要知道它在哪一行,此时,我需要它返回{ id:rowid,value:cellvalue } 的值对形式,并且rowid就是那一行的id。可以把源代码修改成如下形式。

getCol : function (col, obj, mathopr) {
var ret = [], val, sum=0, min, max, v,mini , maxi;
obj = typeof obj !== 'boolean' ? false : obj;
if(mathopr === undefined) { mathopr = false; }
this.each(function(){
var $t=this, pos=-1;
if(!$t.grid) {return;}
if(isNaN(col)) {
$($t.p.colModel).each(function(i){
if (this.name === col) {
pos = i;return false;
}
});
} else {pos = parseInt(col,10);}
if(pos>=0) {
var ln = $t.rows.length, i =0;
if (ln && ln>0){
while(i<ln){
if($($t.rows[i]).hasClass('jqgrow')) {
try {
val = $.unformat.call($t,$($t.rows[i].cells[pos]),{rowId:$t.rows[i].id, colModel:$t.p.colModel[pos]},pos);
} catch (e) {
val = $.jgrid.htmlDecode($t.rows[i].cells[pos].innerHTML);
}
if(mathopr) {
v = parseFloat(val);
sum += v;
if (max === undefined) {max = min = v;mini = maxi = i}
if(v<min){min = v;mini = i;}//remark the i
if(v>max){max = v;maxi = i;}//remark the i
min = Math.min(min, v);
max = Math.max(max, v);
}
else if(obj) { ret.push( {id:$t.rows[i].id,value:val} ); }
else { ret.push( val ); }
}
i++;
}
if(mathopr) {
switch(mathopr.toLowerCase()){
case 'sum': ret =sum; break;
case 'avg': ret = sum/ln; break;
case 'count': ret = ln; break;
case 'min': if(obj){ret={id:$t.rows[mini].id,value:min}} else {ret = min}; break;
case 'max': if(obj){ret={id:$t.rows[maxi].id,value:max}} else {ret = max}; break;
}
}
}
}
});
return ret;
},

这样,既不影响原来的功能,又改进了getCol方法中不足的地方。

var value3 = $jqGrid.getCol(colname,false,'min');//返回该列最小值
var value3 = $jqGrid.getCol(colname,true,'min');//返回包含该列最小值的对象,形式为{ id:rowid,value:value }

注意,直接修改插件的源代码,是不安全的做法。我们把这个方法合并到jQuery实例方法中去,这样就可以覆盖原来的方法了。创建一个jgGridEx.js文件,内容如下。

$.fn.extend({
methon:function(){}//把这个替换成getCol方法
})

这样就把原来jqGrid中的getCol方法安全的覆盖了,使用时引入这个文件即可。当然,这个文件应该在jQuey和jqGrid之后引入。

(完)

jqGrid插件getCol方法的一个改进的更多相关文章

  1. 分享在Linux下使用OSGi.NET插件框架快速实现一个分布式服务集群的方法

    在这篇文章我分享了如何使用分层与模块化的方法来设计一个分布式服务集群.这个分布式服务集群是基于DynamicProxy.WCF和OSGi.NET插件框架实现的.我将从设计思路.目标和实现三方面来描述. ...

  2. jqGrid使用setColProp方法动态改变列属性

    在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...

  3. sublime text3的一些插件安装方法和使用

    sublime text部分插件使用方法在线安装package Control的方法:    ctrl+~ 输入如下代码:        import urllib2,os; pf='Package ...

  4. ImitateLogin新增插件机制以及又一个社交网站的支持

    我的文章里已经多次介绍 imitate-login ,这是我最近一直在维护的一个使用c#模拟社交网站登录的开源项目,现在新增了对插件的支持以及一个新的网站(由于某种原因,会在文章结束部分介绍:而且仅会 ...

  5. 安装Sublime Text 3插件的方法

    直接安装 安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 使用Package Contr ...

  6. eclipse svn插件安装方法

    eclipse svn插件安装方法 使用dropins安装插件 从Eclipse3.5开始,安装目录下就多了一个dropins目录.只要将插件解压后拖到该目录即可安装插件.比如安装svn插件subcl ...

  7. Emmet插件使用方法总结

    Emmet插件使用方法总结 在前端开发的过程中,一大部分的工作是写 HTML.CSS 代码.特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等. ...

  8. 转:myeclipse 8.x 插件安装方法终极总结

    原文地址:http://shaomeng95.iteye.com/blog/945062 最近因为要指导新人顺便整理文档,懒得折腾eclipse,需要装的插件太多,于是乎装myeclipse 8.5吧 ...

  9. OSGI.NET 插件启动方法

    在使用OSGI.NET框架来开发插件过程中,有时为了测试一个插件,或运行一个插件,需要启动主个插件,如果没有主窗口程序,那么该 如何启动一个插件,而不是再开发一个主窗口程序(那样是不是太麻烦,仅仅是为 ...

随机推荐

  1. Linux目录结构

  2. BZOJ 2756: [SCOI2012]奇怪的游戏 [最大流 二分]

    2756: [SCOI2012]奇怪的游戏 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 3352  Solved: 919[Submit][Stat ...

  3. 第11章 Linux服务管理

    1. 服务分类 (1)Linux的服务 ①Linux中绝大多数的服务都是独立的,直接运行于内存中.当用户访问时,该服务直接响应用户,其好处是服务访问响应速度快.但不利之处是系统中服务越多,消耗的资源越 ...

  4. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  5. WinRT自定义控件第一 - 转盘按钮控件

    之前的文章中,介绍了用WPF做一个转盘按钮控件,后来需要把这个控件移植到WinRT时,遇到了很大的问题,主要原因在于WPF和WinRT还是有很大不同的.这篇文章介绍了这个移植过程,由于2次实现的控件功 ...

  6. 前端构建大法 Gulp 系列 (一):为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  7. 《Effective Java》学习笔记——积累和激励

    从一个实际案例说起 国庆长假前一个礼拜,老大给我分配了这么一个bug,就是打印出来的报表数量为整数的,有的带小数位,有的不带,毫无规律. 根据短短的两个多月的工作经验以及猜测,最终把范围缩小到以下这段 ...

  8. a different object with the same identifier value was already associated with the session:

    hibernate操作: 实例化两个model类,更新时会提示  a different object with the same identifier value was already assoc ...

  9. 【初学者指南】在ASP.NET MVC 5中创建GridView

    介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些 ...

  10. PHP 调用webService方式

    方法如下: <?php header('Content-Type: text/html; charset=UTF-8'); define('APP_ROOT', dirname(__FILE__ ...