Question

I am trying to add a function named rows to the jqGrid jQuery plugin, but I can’t determine the syntax. Here are my non-working versions.

(function($) {
 $.fn.jgrid.rows = function(data) {
   // do something
 };
});

(function($) {
 $.fn.rows = function(data) {
   // do something
 };
});

 $.jqgrid.fn.rows = function(data) {
   // do something
 };

 $.fn.rows = function(data) {
   // do something
 };

What would be the proper syntax?

Thanks!

Answer 1

It seems the correct answer on your question depends a little from what should do the method rows which you want to implement. I try to guess a little and gives the implementation which correspond to my understanding of your question.

First of all jqGrid is jQuery plugin and if you write for example

$(myselector).jqGrid('setSelection',rowid);

it can be that $(myselector) selects more as one DOM element. For example

$('table').jqGrid('setSelection',rowid);

will try call jqGrid method ‘setSelection’ on all <table> elements on the page. So this element in the array of DOM elements (it should be <table> DOM elements) and not only one element.

Another general remark. There are jQuery methods which can be chained like

$("#list").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');

In the case the ‘setGridParam’ do something and return this to support chaining. Other methods don’t support chaining and return what the method need to return. For example getDataIDs returns the array of ids and one can’t chain getDataIDs with another jQuery methods.

Now I return back to your question. I would better name the new method getRowsById. The method will return array with DOM elements which represent <tr> (table row). The method will have rowid as the parameter. Then one can extend jqGrid with the new method in the way:

$.jgrid.extend({
    getRowsById: function (rowid){
        var totalRows = [];
        // enum all elements of the jQuery object
        this.each(function(){
            if (!this.grid) { return; }
                // this is the DOM of the table
                // we
                var tr = this.rows.namedItem(rowid);
                if (tr !== null) { // or if (tr !== null)
                    totalRows.push(tr);
                }
        });
        return totalRows;
    }
});

First of all I use in the example the method $.jgrid.extend defined here. It does mostly $.extend($.fn.jqGrid,methods);. Then, because the method which we implement can’t be chained, we define totalRows variable which will be returned later as the result of the method. Now we have to enumerate all objects from the this (like elements of $(myselector) or $('table') in the examples above). We do this with respect of this.each(function(){/*do here*/}); construct. Then inside of the loop we do following

if (!this.grid) { return; }

With the statement we test whether the current DOM element has grid property. It is not a standard property of the table element, but jqGrid extend the DOM elements of the table with the property. With the test we could skip for example other table elements where the jqGrid are not applied (which are not a jqGrid). Then I use the fact that this must be DOM of the table element which has rows property (see here, and here) and I use its namedItem method. The native implemented method works better as $(“#”+rowid), but do the same. After all we return the array totalRows. It will have no element if the row with the row id not in the grid and 1 if it is exist. If the current jQuery selector select more as one grid and we had an error and included in both grids rows with the same id the returned array will has length greater as 1. So we can use it so

var grid = $("#list");
var tr = grid.jqGrid('getRowById','1111');
alert(tr.length);

At the end I want to mention that the method $.jgrid.extend can be helpful not only if you want to introduce new jqGrid method. Sometime there are already some jqGrid method, but it does not exactly what you need. So you want that the modified method do something at the beginning or something at the end of the original jqGrid method. In the case we can do the following

var oldEditCell = $.fn.jqGrid.editCell;
$.jgrid.extend({
    editCell: function (iRow,iCol, ed){
        var ret;
        // do someting before
        ret = oldEditCell.call (this, iRow, iCol, ed);
        // do something after
        return ret; // return original or modified results
    }
});

In the example we overwrite the original editCell method with will be called by jqGrid itself and do something before of something after the call.