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

问题描述

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

I am using: VS 2010, ASP.NET MVC2, jqGrid 3.8.2.

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

I want to have the navGrid 'Edit' button open a different view in the controller. I have tried a number of things to no avail. In order to open the selected row, I assume I will need to append the id to the url.

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

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

Any suggestions are welcome. If I can't get it to work, I will add an 'Edit' button outside the jqGrid and do a normal Html.ActionLink call to open the different view.

谢谢！

更新

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

Following @Oleg's answer, I now have the following working perfectly:

    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.");
            }
        }});

推荐答案

navGrid 遵循 editGridRow 表单编辑方法，因此将显示对话框而不是 MVC 控制器的视图.要获得您想要的行为，您应该使用 {edit:false, ...} 设置并添加 自定义按钮，看起来和原来的编辑"按钮一模一样.为此，您应该使用 buttonicon: "ui-icon-pencil" 参数(请参阅 navGrid 中的 editicon 默认参数 源代码).在 this answer 中，您会找到代码示例.您还可以使用 $.jgrid.nav.edittitle 作为标题参数:

The option {edit:true, ...} of the navGrid follow to the usage of editGridRow method of the form editing, so the dialog will be displayed and not the View of your MVC controller. To have the behavior which you want you should use {edit:false, ...} setting and add custom button which look exactly like the original "Edit" button. To make this you should use buttonicon: "ui-icon-pencil" parameter (see editicon default parameter in the navGrid source code). In this answer you will find code example. You can additionally use $.jgrid.nav.edittitle as the title parameter:

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';
      }
    }
);

这篇关于jqGrid navGrid 按钮调用 ASP.NET MVC 视图 - 如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！