jqGrid的navGrid按钮调用ASP.NET MVC视图 - 怎么样？ [英] jqGrid navGrid button calling ASP.NET MVC view - how?

问题描述

我使用：VS 2010，ASP.NET MVC2，jqGrid的3.8.2

。

我希望有navGrid编辑按钮，打开控制器不同的看法。我已经尝试了许多事情都无济于事。为了打开选定的行，我想我需要将ID添加到URL。

 的jQuery（'＃listComponents）。jqGrid的（{
    网址：'/组件/获取'，
    editurl：'/组件/编辑'，
    ...
    }）navGrid（'＃pagerComponents'，{编辑：真实，...}，{URL：/组件/编辑'}）;
 

任何建议都欢迎。如果我不能得到它的工作，我会添加一个编辑按钮，jqGrid的外面，做一个正常的Html.ActionLink调用打开了不同的看法。

谢谢！

更新

继@奥列格的回答，我现在有以下工作完美：

 的jQuery（'＃listComponents）。jqGrid的（
    {
        网址：'/组件/获取/'，
        ...
    }）navGrid（'＃pagerComponents'，{编辑：假的，...}）
    .navButtonAdd（'＃pagerComponents'，{
        标题：，
        标题：编辑组件，
        buttonicon：UI图标铅笔
        onClickButton：功能（）{
            变种的id = jQuery的（＃listComponents）getGridParam（'selrow'）;
            如果（ID）{
                VAR数据=的jQuery（＃listComponents）getRowData（ID）。
                window.location的='/组件/编辑/'+ data.COMPONENTID;
            }
            其他{
                警报（请选择要编辑的行。）;
            }
        }}）;
 

解决方案

选项 {编辑：真实，...} 中的 navGrid 遵循的 editGridRow 方法，因此会显示在对话框和你的MVC控制器不观。有你想要你应该使用 {编辑：假的，...}行为设置和添加的自定义按钮看起来酷似原来的编辑按钮。为了使这个你应该使用 buttonicon：UI图标铅笔参数（见 editicon 默认参数的 navGrid 来源$ C ​​$ C ）。在<一个href=\"http://stackoverflow.com/questions/3024075/jqgrid-navigation-based-on-the-selected-row/3024278#3024278\">this回答你会发现code例子。你还可以使用 $ jgrid.nav.edittitle 为题的参数：

  VAR电网= $（＃listComponents）;
grid.jqGrid（{
    网址：'/组件/获取'，
    editurl：'/组件/编辑'，
    ...
}）;
grid.navGrid（'＃pagerComponents'，{编辑：假的，...}，...）;
grid.jqGrid（'navButtonAdd'，'#pagerComponents'，
    {标题：，buttonicon：UI图标铅笔，标题：$ .jgrid.nav.edittitle，
      onClickButton：功能（）{
          变种的rowid = grid.jqGrid（'getGridParam'，'selrow'）;
          window.location的='/组件/编辑/'+'的rowid';
      }
    }
）;
 

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

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

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.

Thanks!

Update

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

解决方案

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视图 - 怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！