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