2

このjqgridサンプルをhttp://tpeczek.codeplex.com/releases/view/61796からダウンロードしました。

「基本」グリッドを更新すると、各行に編集ボタンが表示されます。これをクリックしてproductIDを渡すと、別の編集ページに移動したいと思います。しかし、ポストバックはありませんか？また、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>
4

1 に答える 1

0

したがって、質問の最初の部分で、その行の編集ボタンをクリックして特定の URL にリダイレクトする場合は、アクション フォーマッタでいくつか指定する必要があります。方法を教えます

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

ここでこの例を確認してください。アクションフォーマッターで削除オプションを提供しており、次のように編集用のURLを指定できます

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

編集可能な行はデフォルトでサーバーに送信されます。たとえば、次のように編集可能にする列で editable:true を指定する必要があります。

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

アクションフォーマッタの編集をクリックすると、編集可能な列データを含む「EditAction」に移動し、そこで使用できます。

2番目の部分については、すべて問題ないように見えます。jqgridにロードしているサーバーから取得しているデータが、jqgridの列名とアルファベット順に同じ名前であることを確認できますか?そうでない場合は、フィドラーまたは開発者ツールで応答を確認してください。

于 2012-07-31T15:54:31.767 に答える