向jqGrid jQuery插件添加一个函数

问题描述

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

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

什么是正确的语法？

谢谢！

推荐答案

看来您问题的正确答案取决于该方法应该做什么行您要实现的。我尝试猜测一下，然后给出与我对你的问题的理解相对应的实现。

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）选择作为一个DOM元素。例如

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

将尝试在所有< table> 页面上的元素。所以这个元素在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'执行某些操作并返回此支持链接。其他方法不支持链接并返回该方法需要返回的内容。例如， getDataIDs 返回id数组，并且无法使用其他jQuery方法链接 getDataIDs 。

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 * /}）; construct。然后我们在循环内部执行以下操作

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使用该属性扩展表的DOM元素。通过测试我们可以跳过例如其他表元素，其中 jqGrid 未应用（不是jqGrid） 。然后我使用这个必须是表元素的DOM这个 rows property（参见和）我使用它的 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.

这篇关于向jqGrid jQuery插件添加一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！