如何在jqGrid中设置双击函数来调用自定义函数?

How do I set doubleClick function to call custom function in jqGrid

本文关键字：函数 调用 自定义函数 双击 设置 jqGrid      更新时间：2023-09-26

我在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形式，我需要所有的铃声和哨子的Zend形式可用。服务器生成这个表单，并将其加载到一个对话框表单中。如果有一种方法可以在不诉诸我的editSelectedRow自定义方法的情况下仍然实现这一点，我很乐意学习它。谢谢。

你的问题是纯粹的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的用法可以保持不变。

相关文章：