jqGrid插件getCol方法的一个改进

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之后引入。

(完)

上一篇:五分钟搭建起一个包含CRUD功能的JqGrid表格


下一篇:重复加载同一个jqgrid