向jqGrid jQuery插件添加一个函数

时间:2011-06-17 15:05:53

标签: javascript jquery jqgrid

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

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

什么是正确的语法?

谢谢!

2 个答案:

答案 0 :(得分:13)

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

首先,jqGrid是jQuery插件,如果你写的是

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

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

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

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

另一个一般性评论。有一些jQuery方法可以像

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

如果'setGridParam'执行某些操作并返回this以支持链接。其他方法不支持链接并返回该方法需要返回的内容。例如,getDataIDs返回id数组,而不能使用其他jQuery方法链接getDataIDs

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

$.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定义here。它主要是$.extend($.fn.jqGrid,methods);。然后,因为我们实现的方法不能被链接,所以我们定义totalRows变量,该变量稍后将作为方法的结果返回。现在我们必须枚举this中的所有对象(例如上面示例中的$(myselector)$('table')的元素)。我们这样做是为了this.each(function(){/*do here*/});构造。然后我们在循环内部执行以下操作

if (!this.grid) { return; }

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

totalRows

最后,我想提一下,方法var grid = $("#list"); var tr = grid.jqGrid('getRowById','1111'); alert(tr.length); 不仅可以帮助您介绍新的jqGrid方法。 有时候已经有了一些jqGrid方法,但它并不完全符合你的需要。因此,您希望修改后的方法在开始时执行某些操作或在原始jqGrid方法的末尾执行某些操作。在这种情况下,我们可以做以下

$.jgrid.extend

在示例中,我们覆盖原始的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 } }); 方法,将由jqGrid本身调用,并在调用之后执行某些操作。

答案 1 :(得分:2)

尝试:

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