jqGrid插件getCol方法的一个改进

时间:2022-09-22 14:59:09

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&period;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&period;x 插件安装方法终极总结

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

  9. OSGI&period;NET 插件启动方法

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

随机推荐

  1. &lbrack;super init&rsqb;方法的调用

    当重新覆盖父类的init方法时,需要调用[super init]方法确认父类中的init是返回一个实例,而不是一个空的实例. 那为什么要调用这个呢? 我得猜测是这样的:因为这是一个初始化方法,需要对对 ...

  2. Ubuntu实现双网卡双IP双待机

    Ubuntu实现双网卡双IP双待机 待机是借用了手机中的说法,其实是电脑上有两个网卡,一个无线,一个有线的.要实现无线访问外网Google Baidu查资料,有线网卡直接连接开发板.在Ubuntu上配 ...

  3. 【POJ2104】【HDU2665】K-th Number 主席树

    [POJ2104][HDU2665]K-th Number Description You are working for Macrohard company in data structures d ...

  4. Linux文件管理下

    文件操作 对于文件,我们可以读取(read),写入(write)和运行(execute).读取是从已经存在的文件中获得数据.写入是向新的文件或者旧的文件写入数据.如果文件储存的是可执行的二进制码,那么 ...

  5. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  6. 探究PHP底层

    探究PHP底层 1.PHP是什么?   PHP 指的是我们从外面看到的一套完整的系统.这听起来有点糊涂,但其实并不复杂(PHP4 内部结构图).从功能上来分:我们可以分为三部分: 1. 解释器部分(Z ...

  7. https请求之绕过证书安全校验相关配置

    需在weblogic服务器上配置内存溢出的地方加入一行配置: -DUseSunHttpHandler=true      注:空格隔开 然后调用工具类:https://www.cnblogs.com/ ...

  8. NET 获取实例所表示的日期是星期几

    获取日期枚举,可以根据switch去进行操作 DateTime.Now.DayOfWeek

  9. Python中xlrd和xlwt模块读写Excel的方法

    本文主要介绍可操作excel文件的xlrd.xlwt模块.其中xlrd模块实现对excel文件内容读取,xlwt模块实现对excel文件的写入. 着重掌握读取操作,因为实际工作中读取excel用得比较 ...

  10. cnetos7最小化安装ifconfig命令找不到怎么办

    我们在安装完centos7最小化系统安装完成后,执行ifconfig命令会报命令未找到.实际上在centos7上,使用“ip addr”和“ip link”命令来查找网卡详情.ifconfig命令已经 ...