jqGrid navGrid 按钮调用 ASP.NET MVC 视图 - 如何？

Question

我正在使用：VS 2010、ASP.NET MVC2、jqGrid 3.8.2。

我想让 navGrid 的“编辑”按钮在控制器中打开不同的视图。我尝试了很多事情都无济于事。为了打开选定的行，我假设我需要将 id 附加到 url。

jQuery('#listComponents').jqGrid({
    url: '/Components/Get',
    editurl: '/Components/Edit',
    ...
    }).navGrid('#pagerComponents', {edit:true, ...}, {url: '/Components/Edit'});

欢迎提出任何建议。如果我不能让它工作，我将在 jqGrid 之外添加一个“编辑”按钮，并执行正常的 Html.ActionLink 调用以打开不同的视图。

谢谢！

更新

按照@Oleg 的回答，我现在可以完美地完成以下工作：

    jQuery('#listComponents').jqGrid(
    {
        url: '/Components/Get/',
        ...
    }).navGrid('#pagerComponents', { edit: false, ...})
    .navButtonAdd('#pagerComponents', {
        caption: "",
        title: "Edit Component",
        buttonicon: "ui-icon-pencil",
        onClickButton: function () {
            var id = jQuery("#listComponents").getGridParam('selrow');
            if (id) {
                var data = jQuery("#listComponents").getRowData(id);
                window.location = '/Components/Edit/' + data.COMPONENTID;
            }
            else {
                alert("Please select a row to edit.");
            }
        }});

Answer 1

navGrid 的选项{edit:true, ...} 遵循表单编辑editGridRow 方法的用法，因此将显示对话框而不是MVC 控制器的视图。要获得您想要的行为，您应该使用{edit:false, ...} 设置并添加看起来与原始“编辑”按钮完全相同的custom button。为此，您应该使用buttonicon: "ui-icon-pencil" 参数（请参阅navGrid source code 中的editicon 默认参数）。在this answer 你会找到代码示例。您还可以使用$.jgrid.nav.edittitle 作为标题参数：

var grid = $("#listComponents");
grid.jqGrid({
    url: '/Components/Get',
    editurl: '/Components/Edit',
    ...
});
grid.navGrid('#pagerComponents', {edit:false, ...}, ...);
grid.jqGrid ('navButtonAdd', '#pagerComponents',
    { caption: "", buttonicon: "ui-icon-pencil", title: $.jgrid.nav.edittitle,
      onClickButton: function() {
          var rowid = grid.jqGrid('getGridParam', 'selrow');
          window.location = '/Components/Edit/' + 'rowid';
      }
    }
);