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. SSIS 包部署 Package Store 后,在 IS 中可以执行,AGENT 执行却报错

    可以执行 SSIS Package ,证明用 SSIS Package 的账户是可以执行成功的.SQL Server Agent 默认指定账号是 Network Service. 那么可以尝试一下将 ...

  2. Mysql - 游标/动态sql/事务

    游标这个在我目前的项目里面用的还不多, 但是其功能还是很强大的. 动态sql以前都没用过, 是跟着富士康(不是张全蛋的富土康哦)过来的同事学的. 还是挺好用的. 我的数据库方面, 跟他学了不少. 在此 ...

  3. Oracle使用触发器和mysql中使用触发器的比较——学习笔记

    一.触发器 1.触发器在数据库里以独立的对象存储, 2.触发器不需要调用,它由一个事件来触发运行 3.触发器不能接收参数 --触发器的应用 举个例子:校内网.开心网.facebook,当你发一个日志, ...

  4. 简单Linux命令学习笔记

    1.查看进程 ps -ef | grep 关键字       /*关键字为服务名*/ netstat -unltp | grep 关键字        /*关键字为服务名或者是端口均可*/ 2.杀死进 ...

  5. 【AutoMapper官方文档】DTO与Domin Model相互转换(中)

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

  6. Nginx学习笔记(二) Nginx--connection&request

    Nginx--connection&request 在Nginx中,主要包括了连接与处理两部分. connection 在src/core文件夹下包含有connection的源文件,Ngx_c ...

  7. React 其实比 MVVM 架构更加卡顿

    React 号称通过引入 Virtual DOM 带来了性能的提升,而其实 React 之所以需要 Virtual DOM,是因为它的架构下,state 的变更是全量的,然后触发 render 返回全 ...

  8. your password has expired.to log in you must change it

    今天应用挂了,log提示密码过期.客户端连接不上. 打开mysql,执行sql语句提示密码过期 执行set password=new password('123456'); 提示成功,但客户端仍然连接 ...

  9. 4. SVM分类器求解(2)

    最优间隔分类器(optimal margin classifier) 重新回到SVM的优化问题: 我们将约束条件改写为: 从KKT条件得知只有函数间隔是1(离超平面最近的点)的线性约束式前面的系数,也 ...

  10. git 切换远程分支

    http://zhidao.baidu.com/link?url=cuqJsL9skJJn5c556zXfP1dgCAOUK37CDXkNIw_sS0YKmvoROTI0HP7-PbKjgs6Lv4X ...