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。

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

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

  1. getCol : function (col, obj, mathopr) {
  2. var ret = [], val, sum=0, min, max, v,mini , maxi;
  3. obj = typeof obj !== 'boolean' ? false : obj;
  4. if(mathopr === undefined) { mathopr = false; }
  5. this.each(function(){
  6. var $t=this, pos=-1;
  7. if(!$t.grid) {return;}
  8. if(isNaN(col)) {
  9. $($t.p.colModel).each(function(i){
  10. if (this.name === col) {
  11. pos = i;return false;
  12. }
  13. });
  14. } else {pos = parseInt(col,10);}
  15. if(pos>=0) {
  16. var ln = $t.rows.length, i =0;
  17. if (ln && ln>0){
  18. while(i<ln){
  19. if($($t.rows[i]).hasClass('jqgrow')) {
  20. try {
  21. val = $.unformat.call($t,$($t.rows[i].cells[pos]),{rowId:$t.rows[i].id, colModel:$t.p.colModel[pos]},pos);
  22. } catch (e) {
  23. val = $.jgrid.htmlDecode($t.rows[i].cells[pos].innerHTML);
  24. }
  25. if(mathopr) {
  26. v = parseFloat(val);
  27. sum += v;
  28. if (max === undefined) {max = min = v;mini = maxi = i}
  29. if(v<min){min = v;mini = i;}//remark the i
  30. if(v>max){max = v;maxi = i;}//remark the i
  31. min = Math.min(min, v);
  32. max = Math.max(max, v);
  33. }
  34. else if(obj) { ret.push( {id:$t.rows[i].id,value:val} ); }
  35. else { ret.push( val ); }
  36. }
  37. i++;
  38. }
  39. if(mathopr) {
  40. switch(mathopr.toLowerCase()){
  41. case 'sum': ret =sum; break;
  42. case 'avg': ret = sum/ln; break;
  43. case 'count': ret = ln; break;
  44. case 'min': if(obj){ret={id:$t.rows[mini].id,value:min}} else {ret = min}; break;
  45. case 'max': if(obj){ret={id:$t.rows[maxi].id,value:max}} else {ret = max}; break;
  46. }
  47. }
  48. }
  49. }
  50. });
  51. return ret;
  52. },

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

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

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

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

这样就把原来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. Android之SAX解析XML

    一.SAX解析方法介绍 SAX(Simple API for XML)是一个解析速度快并且占用内存少的XML解析器,非常适合用于Android等移动设备. SAX解析器是一种基于事件的解析器,事件驱动 ...

  2. 技术笔记:Indy控件发送邮件

    工作中有个需求需要发送邮件,因为使用的delphi6,所以自然就选择了indy组件,想想这事挺简单的.实现的过程倒是简单,看着Indy的demo很快就完了,毕竟也不是很复杂的功能. 功能要求: 1.压 ...

  3. 针对Linux ASP.NET MVC网站中 httpHandlers配置无效的解决方案

    近期有Linux ASP.NET用户反映,在MVC网站的Web.config中添加 httpHandlers 配置用于处理自定义类型,但是在运行中并没有产生预期的效果,服务器返回了404(找不到网页) ...

  4. 【转】ofbiz数据库表结构设计

    真心不错的文章,可以加深对企业信息化的设计理解:) http://blog.sina.com.cn/s/blog_a2ca5d8c01017fa0.html http://blog.sina.com. ...

  5. Storm内部的消息传递机制

    作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 一个Storm拓扑,就是一个复杂的多阶段的流式计算.Storm中的组件 ...

  6. Spark笔记:复杂RDD的API的理解(上)

    本篇接着讲解RDD的API,讲解那些不是很容易理解的API,同时本篇文章还将展示如何将外部的函数引入到RDD的API里使用,最后通过对RDD的API深入学习,我们还讲讲一些和RDD开发相关的scala ...

  7. C++的性能C#的产能?! - .Net Native 系列《三》:.NET Native部署测试方案及样例

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  8. 如何在VMware中安装Windows Phone SDK 8.0 (支持模拟器调试)

    相信很多开发者目前的系统还是Win7或Mac,一般不会为了开发某个程序而重装系统,所以我们就需要用到VMware这类的虚拟机来模拟预期的开发环境.在开始介绍前,给大家说明下我当前的软硬件环境,本文所讲 ...

  9. LeetCode-2AddTwoNumbers(C#)

    # 题目 2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The di ...

  10. Java中isAssignableFrom的用法

    class1.isAssignableFrom(class2) 判定此 Class 对象所表示的类或接口与指定的 Class 参数所表示的类或接口是否相同,或是否是其超类或超接口.如果是则返回 tru ...