10

I have the following jQuery code which I'm using to populate a jqGrid. It works perfectly posting to my ASP.NET MVC page on the first click of the button. My
problem is, any other clicks past the first it seems to run through the jquery code when clicking the button but it never makes it to the POST page. Any ideas why?

<script type="text/javascript">

        $(document).ready(function() {
            $('#btnSubmit').click(function() {

                /* Refreshes the grid */
                $("#list").jqGrid({
                    /* The controller action to get the grid data from */
                    url: '/CRA/AddPart',
                    data: { partNumber: "123"},
                    datatype: 'json',
                    mtype: 'GET',
                    /* Define the headers on the grid */
                    colNames: ['col1', 'col2', 'col3', 'col4'],
                    /* Define what fields the row columns come from */
                    colModel: [
                  { name: 'col1', index: 'invid', width: 290 },
                  { name: 'col2', index: 'invdate', width: 290 },
                  { name: 'col3', index: 'amount', width: 290, align: 'right' },
                  { name: 'col4', index: 'tax', width: 290, align: 'right'}],
                    height: 'auto',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'id',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '../../Scripts/jgrid/themes/steel/images',
                    caption: 'Core Return Authorization Contents:',
                    cellEdit: true
                });
            });
        });

    </script>
4

3 に答える 3

21

グリッドがリロードされない理由は、間違ったメソッドを呼び出しているためです。jqGrid メソッドは、およそ次のことを行います。

  1. テーブルを調べて、それが既にグリッドであるかどうかを確認します。もしそうなら、終了します。
  2. テーブルをグリッドに変えます。
  3. データの最初のページを設定します。

したがって、メソッドを 2 回目に呼び出すと、手順 1 のように何も実行されません。

$("#list").trigger("reloadGrid")代わりに、2 回目以降のすべてのクリックで呼び出す必要があります。

ここで、グリッド オプションの mtype により、グリッドは POST ではなく GET を実行します。したがって、POST がボタン自体からのものである場合 (つまり、submit タイプの入力である場合)、true を返して、submit を通常どおり続行する必要があることを示す必要があります。

于 2009-07-20T20:53:19.590 に答える
6

解決策は次のとおりです。

<script type="text/javascript">
        var firstClick = true;
        $(document).ready(function() {
            $('#btnSubmit').click(function() {
                 if (!firstClick) {
                     $("#list").trigger("reloadGrid");
                 }
                 firstClick = false;
                /* Refreshes the grid */
                $("#list").jqGrid({
                    /* The controller action to get the grid data from */
                    url: '/CRA/AddPart',
                    data: { partNumber: "123"},
                    datatype: 'json',
                    mtype: 'GET',
                    /* Define the headers on the grid */
                    colNames: ['col1', 'col2', 'col3', 'col4'],
                    /* Define what fields the row columns come from */
                    colModel: [
                  { name: 'col1', index: 'invid', width: 290 },
                  { name: 'col2', index: 'invdate', width: 290 },
                  { name: 'col3', index: 'amount', width: 290, align: 'right' },
                  { name: 'col4', index: 'tax', width: 290, align: 'right'}],
                    height: 'auto',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'id',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '../../Scripts/jgrid/themes/steel/images',
                    caption: 'Core Return Authorization Contents:',
                    cellEdit: true
                });
            });
        });

    </script>
于 2010-10-08T13:27:23.737 に答える
1

新しい値をアクションに POST する必要があるため、「reloadGrid」は機能しません。

すべてのコンテンツを削除して、空のテーブルを再度作成します。

「空のグラフ」divを非表示にするグリッドがあるかどうかを確認した場合(メッセージのみが表示されます)。それ以外の場合は、テーブルを囲む div をきれいにしてから、テーブル内に再度追加します。プラグインが空のテーブルを見つけると、グリッドを完全に再度ロードします。

LoadTableData は、グリッドを作成およびロードするための共通機能を持つ関数です。

おそらく、この解決策はエレガントではありませんが、時間が急いでいるときは...

$("#btnDownloadsPerFile").click(function () {
            if ($('#chartContainerDownloadsPerFile .ui-jqgrid').length == 0) {
                $('#chartContainerDownloadsPerFile .emptyChart').hide();
            }
            else {
                $('#chartContainerDownloadsPerFile').empty();
                $('#chartContainerDownloadsPerFile').append('<table id="downloadsPerFileGrid"></table>');
            }
            LoadTableData("downloadsPerFileGrid", $('#ddlportalOptionsDownloadsPerFile').val(), "downloadsPerFile", $('#ddlTimeOptionsDownloadsPerFile').val(), $('#ddlTimeValuesDownloadsPerFile').val(), $('#ddlCountries').val());
        });
于 2012-03-26T14:15:12.483 に答える