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

时间:2011-11-19 10:15:15

标签: javascript jqgrid double-click

我在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自定义方法的情况下仍然实现这一点,我很乐意学习它。谢谢。

1 个答案:

答案 0 :(得分:3)

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

如果将函数editSelectedRow定义为

function editSelectedRow(rowid)
{
    ...
}

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

另一个问题是你在this函数体内使用editSelectedRow。这不对。您可以用另一种方式定义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对象。

editSelectedRownavButtonAdd的使用情况可以保持不变。