如何设置 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);
      }

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

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 对象。

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