Adding a function to jqGrid jQuery plugin

I am trying to add a function called rows in a jqGrid jQuery plugin, but I cannot determine the syntax. Here are my idle 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 will be the correct syntax?

Thanks!

+6
source share
2 answers

It seems that the correct answer to your question depends a bit on what the rows method you want to implement should do. I try to guess a little and give an implementation that matches my understanding of your question.

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

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

it may be that $(myselector) selects more as one DOM element. for instance

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

will try to call the jqGrid method 'setSelection' for all <table> elements on the page. Thus, the this element in the array of DOM elements (it must be <table> DOM elements), and not just one element.

Another general remark. There are jQuery methods that you can copy as

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

In the case where 'setGridParam' does something and returns this to support the chain. Other methods do not support the chain and return what the method should return. For example, getDataIDs returns an array of identifiers, and you cannot associate getDataIDs with other jQuery methods.

Now I come back to your question. I would call the new method getRowsById . The method returns an array with DOM elements that represent <tr> (table row). The method will have rowid as a parameter. Then you can extend jqGrid using the new method as follows:

 $.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 the $.jgrid.extend method defined here . This is basically $.extend($.fn.jqGrid,methods); . Then, since the method we are implementing cannot be encoded, we define the variable totalRows , which will be returned later as the result of the method. Now we must list all the objects from this (for example, the elements $(myselector) or $('table') in the examples above). We do this by constructing this.each(function(){/*do here*/}); . Then inside the loop we follow

 if (!this.grid) { return; } 

Using the instruction, we check if the current DOM element has a grid property. This is not a standard property of the table element, but jqGrid extends the DOM elements of table with a property. With the test, we could skip, for example, other table elements where jqGrid not applicable (which are not jqGrid). Then I use the fact that this must be the DOM of the table element that has the rows property (see here and here ), and I use its namedItem method. A natively implemented method works better as $ ("#" + rowid), but does the same. In the end, we return an array of totalRows . It will not have an element if the row with the row identifier is not in the grid and 1 if it exists. If the current jQuery selector selects more as one grid, and we had an error and included in both rows of the grid with the same identifier, the returned array will be longer than 1. Thus, we can use it to

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

In the end, I want to mention that the $.jgrid.extend method can be useful not only if you want to introduce a new jqGrid method. Some time ago some kind of jqGrid method already exists, but it is not quite what you need . Therefore, you want the modified method to execute at the beginning or at the end of the original jqGrid method. In this 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, which will be called by jqGrid itself and do something before something after the call.

+13
source

try:

 $.extend($.jgrid,{ rows: function() { // do something } }); 
+2
source

Source: https://habr.com/ru/post/890769/


All Articles