向 jqGrid jQuery 插件添加函数

2022-01-19 00:00:00 jquery javascript jqgrid

我正在尝试向 jqGrid jQuery 插件添加一个名为 rows 的函数，但我无法确定语法.这是我的非工作版本.

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
 };

正确的语法是什么?

谢谢！

推荐答案

您的问题的正确答案似乎取决于您要实现的方法 rows 应该做什么.我试着猜测一下，并给出了与我对你的问题的理解相对应的实现.

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.

首先jqGrid是jQuery插件，如果你写例子

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

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

可能是 $(myselector) 选择 more 作为一个 DOM 元素.例如

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

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

将尝试在页面上的所有 <table> 元素上调用 jqGrid 方法setSelection".所以 this 元素在 DOM 元素数组中(应该是 <table> DOM 元素)而不仅仅是一个元素.

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.

另一个一般性评论.有一些 jQuery 方法可以像这样链接起来

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

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

如果 'setGridParam' 做某事并返回 this 以支持链接.其他方法不支持链接并返回方法需要返回的内容.例如 getDataIDs 返回 ids 数组，并且不能将 getDataIDs 与另一个 jQuery 方法链接.

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.

现在我回到你的问题.我最好将新方法命名为 getRowsById.该方法将返回带有 DOM 元素的数组，这些元素代表 <tr>(表格行).该方法将 rowid 作为参数.然后可以顺便用新方法扩展jqGrid:

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;
    }
});

首先我在示例中使用 $.jgrid.extend 定义的方法 这里.它主要是$.extend($.fn.jqGrid,methods);.然后，由于我们实现的方法不能被链接，我们定义了 totalRows 变量，该变量将在稍后作为方法的结果返回.现在我们必须枚举 this 中的所有对象(如上面示例中的 $(myselector) 或 $('table') 的元素).我们针对 this.each(function(){/*do here*/}); 构造执行此操作.然后在循环内部我们执行以下操作

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; }

通过语句我们测试当前DOM元素是否有grid属性.它不是 table 元素的标准属性，而是 jqGrid 用该属性扩展了 table 的 DOM 元素.例如，通过测试，我们可以跳过未应用 jqGrid 的其他 table 元素(它们不是 jqGrid).然后我使用 this 必须是具有 rows 属性的 table 元素的 DOM(参见 这里和这里)和我使用它的 namedItem 方法.本机实现的方法作为 $("#"+rowid) 效果更好，但做同样的事情.毕竟我们返回数组totalRows.如果行 id 的行不在网格中，它将没有元素，如果存在则为 1.如果当前的 jQuery 选择器选择多个作为一个网格并且我们有一个错误并且包含在具有相同 id 的两个网格行中，则返回的数组的长度将大于 1.所以我们可以这样使用它

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);

最后我想提一下，方法 $.jgrid.extend 不仅在您想引入新的 jqGrid 方法时会有所帮助.有时已经有一些 jqGrid 方法，但它并不完全是您所需要的.因此，您希望修改后的方法在原始 jqGrid 方法的开头或结尾执行某些操作.在这种情况下，我们可以执行以下操作

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
    }
});

在示例中，我们覆盖了原来的 editCell 方法，将由 jqGrid 本身调用，并在调用之后执行某些操作.

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.

相关文章