如何设置 doubleClick 函数来调用 jqGrid 中的自定义函数

Question

我在 jqGrid 导航器上添加了一个自定义编辑按钮控件，如下所示：

jQuery("#grid").navButtonAdd('#pager',
    {  
     caption:"Edit", 
     buttonicon:"ui-icon-pencil", 
     onClickButton: editSelectedRow,
     position: "last", 
     title:"click to edit selected row", 
     cursor: "pointer",
     id: "edit-row"
    } 
  );

因此，它不使用默认函数 editGridRow，而是使用我的自定义函数 editSelectedRow。但是，我还想添加 doubleClick 函数，以便它在 doubleClick 上调用 editSelectedRow。

使用默认的 editGridRow 函数是这样工作的

ondblClickRow: function()
      {
       var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
       jQuery(this).jqGrid('editGridRow', rowid);
      }

但是，当我用默认函数 editSelectedRow 替换默认的 editGridRow 函数时，

ondblClickRow: function()
      {
       var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
       jQuery(this).jqGrid('editSelectedRow', rowid);
      }

我在 firebug 中收到以下错误：

uncaught exception: jqGrid - No such method: editSelectedRow

然而，函数 editSelectedRow 确实存在，并且可以通过单击自定义编辑按钮来使用。请帮忙，谢谢。

更新： @Oleg：根据要求，这里是定义方法的代码：editSelectedRow

function editSelectedRow(rowid)
{
    var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
    if( rowid != null ) 
    {
        var dialogId = '#edit-form-dialog';
        var dialogTitle = 'Edit Customer';

        $(dialogId).load('/customer/edit/id/' + rowid, function () 
        {
            $(this).dialog(
            {
                modal: false,
                resizable: true,
                minWidth: 650,
                minHeight: 300,
                height: $(window).height() * 0.95,
                title: dialogTitle,
                buttons: 
                    {
                    "Save": function () 
                        {
                        var form = $('form', this);
                        $(form).submit();
                        $("#grid").trigger("reloadGrid");
                    },
                    "Cancel": function () 
                    {
                        $("#grid").trigger("reloadGrid");
                        $(this).dialog('close');
                    }
                }
          });

            LaunchEditForm(this);
        });
    }
    else
    {
        jQuery( "#dialogSelectRow" ).dialog();
    }
    return false;
 }

@Oleg：谢谢，您建议不要使用自定义方法 editSelectedRow 来代替 editGridRow 方法。我使用它的原因是我的表单是 Zend Forms 并且我需要 Zend Form 的所有功能都可用。服务器生成此表单并将其加载到对话框表单中。如果有一种方法可以在不诉诸我的 editSelectedRow 自定义方法的情况下仍然实现此目的，我会很高兴学习它。谢谢。

Answer 1

你的问题是纯粹的JavaScript问题。

如果您定义函数 editSelectedRow ，则

function editSelectedRow(rowid)
{
    ...
}

可以将其称为 editSelectedRow(rowid) 而不是 jQuery(this).jqGrid('editSelectedRow', rowid);。

另一个问题是您在 editSelectedRow 函数体内使用 this 。这是不正确的。您可以用另一种方式定义 editSelectedRow 函数，

var editSelectedRow = function (rowid) {
    ...
};

在这种情况下，editSelectedRow 将能够将 this 绑定到任何值。为此，您需要使用另一种形式的函数调用。在 ondblClickRow 内部，它将是

ondblClickRow: function () {
    var rowid = jQuery("#grid").jqGrid('getGridParam','selrow');
    editSelectedRow.call(this, rowid);
}

在上面的示例中，call 的第一个参数是在函数内部用作 this 的值。我们仅将当前的 this 值转发到 editSelectedRow。如果我们使用 editSelectedRow(rowid); 形式来调用函数，函数内部的 this 值将被初始化为 window目的。

navButtonAdd 中 editSelectedRow 的用法可以保持不变。