单击一行上的编辑不会回发

时间:2012-07-31 13:09:31

标签: jquery asp.net-mvc-3 jqgrid

我从http://tpeczek.codeplex.com/releases/view/61796

下载了这个jqgrid示例

我更新了'基础'网格,每行显示一个编辑按钮。我想在点击此内容并传入productID时转到另一个Editpage。但是没有回发?另外,我如何使productID显示正确的值,因为它现在显示了productname(ev向左移动)

<script type="text/javascript">
        $(document).ready(function () {
            $('#jqgProducts').jqGrid({
                //url from wich data should be requested
                url: '@Url.Action("Products")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['Actions', 'ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
                //columns model
                colModel: [
                     { name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions' },
                     { name: 'ProductID', index: 'ProductID', align: 'left' },
                            { name: 'ProductName', index: 'ProductName', align: 'left' },
                            { name: 'SupplierID', index: 'SupplierID', align: 'left' },
                            { name: 'CategoryID', index: 'CategoryID', align: 'left' },
                            { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' },
                            { name: 'UnitPrice', index: 'UnitPrice', align: 'left' },
                            { name: 'UnitsInStock', index: 'UnitsInStock', align: 'left' }
                          ],
                //pager for grid
                pager: $('#jqgpProducts'),
                //number of rows per page
                rowNum: 10,
                //initial sorting column
                sortname: 'ProductID',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                //grid height
                height: '100%',
                editurl: '/Edit'
            });

            $('#jqgProducts').navGrid('#pagerComponents', { edit: false }).
         navButtonAdd('#pagerComponents', {
             caption: "fdsfsdf",
             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 = '/Edit/' + data.COMPONENTID;
                 }
                 else {
                     alert("Please select a row to edit.");
                 }
             }
         });





        });


    </script>

1 个答案:

答案 0 :(得分:0)

因此,对于问题的第一部分,如果要在该行中单击“编辑”按钮时重定向到特定网址,则需要使用操作格式化程序指定一些内容。我告诉你如何

http://www.ok-soft-gmbh.com/jqGrid/ActionButtons41WithoutMultiedit.htm

在这里查看此示例,我们正在使用动作格式化程序进行分类,您可以指定要进行编辑的网址

editOptions:{url:'@ Url.Action(“EditAction”)',restoreAfterError:false}

以及可编辑的行,默认情况下他们的数据将转到服务器,您需要指定editable:true以及您想要编辑的列,例如

{name:'ProductName',index:'ProductName',align:'left',editable:true},

现在,如果您单击动作格式化程序的编辑,它将带您进入带有可编辑列数据的“EditAction”,您可以在那里使用它。

对于第二部分,这一切对我来说都很好。你可以检查你从服务器获取的数据,你加载到jqgrid的字母顺序与jqgrid中的列名相同,否则检查fiddler或开发人员工具中的响应。