單擊按鈕加載jqGrid，但第二次失敗

Question

我正在使用jqGrid顯示數據庫中的數據。 有2個文本框可輸入標准。 輸入條件並單擊“顯示”按鈕后，jqGrid將顯示在頁面上。

我第二次單擊輸入了一組不同條件的“顯示”按鈕時，沒有任何反應。 它仍然顯示第一次點擊的數據。 我該如何解決？

視圖：

@section styles {
    <link href="~/Content/themes/redmond/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
}

<h2>Index</h2>

<p class="form-inline">
    Ext: <input type="text" class="form-control" id="extUsed" />
    Date: <input type="text" class="form-control" id="startOfCall" readonly="readonly" />
    <button class="btn btn-primary" id="btnShow">Show</button>
</p>

<table id="grid"></table>
<div id="pager"></div>

@section scripts {
    <script src="~/Scripts/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js"></script>
    <script>
        var firstClick = true;
        $(function () {
            $("#startOfCall").datepicker();

            $("#btnShow").click(function (e) {
                e.preventDefault();

                if (!firstClick) {
                    $("#grid").trigger("reloadGrid");
                } else {

                    $("#grid").jqGrid({
                        mtype: "GET",
                        url: "@Url.Content("~/CallTransaction/GetCallTransactionList")",
                        datatype: "json",
                        colNames: ["Ext Used", "Start of Call", "Destination Number"],
                        colModel: [
                            { name: "ExtUsed", index: "ExtUsed" },
                            { name: "StartOfCall", index: "StartOfCall", formatter: "date", formatoptions: { srcformat: 'd/m/Y', newformat: 'd/m/Y' } },
                            { name: "DestinationNumber", index: "DestinationNumber" }
                        ],
                        postData: {
                            "CallTransaction.ExtUsed": $("#extUsed").val(),
                            "CallTransaction.StartOfCall": $("#startOfCall").val()
                        },
                        pager: jQuery("#pager"),
                        rowNum: 10,
                        rowList: [10, 25, 50],
                        height: "100%",
                        caption: "Call Transaction",
                        autowidth: true,
                        //sortname: "ExtUsed",
                        sortable: true,
                        viewrecords: true,
                        emptyrecords: "No records to display",
                    });
                    $("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false });
                }
                firstClick = false;
            });
        });
    </script>
}

控制器：

public JsonResult GetCallTransactionList(CallTransaction callTransaction, string sidx, string sord, int page, int rows)
{
    int pageIndex = page - 1;
    int pageSize = rows;
    var callTransactionResult = db.Search(callTransaction);
    int totalRecords = callTransactionResult.Count();
    var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
    if (sord.ToUpper() == "DESC")
    {
        callTransactionResult = callTransactionResult.OrderByDescending(ct => ct.ExtUsed).ToList();
        callTransactionResult = callTransactionResult.Skip(pageIndex * pageSize).Take(pageSize).ToList();
    }
    else
    {
        callTransactionResult = callTransactionResult.OrderBy(ct => ct.ExtUsed).ToList();
        callTransactionResult = callTransactionResult.Skip(pageIndex * pageSize).Take(pageSize).ToList();
    }
    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,
        rows = callTransactionResult
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Answer 1

了解當前代碼在創建網格期間設置postData 一個值非常重要。 postData參數的值將是具有在創建網格時評估的屬性的對象。

要修復代碼，您需要使用function作為postData屬性的值：

postData: {
    "CallTransaction.ExtUsed": function () { return $("#extUsed").val(); },
    "CallTransaction.StartOfCall": function () { return $("#startOfCall").val(); }
}

有關更多詳細信息，請參見答案 。 為了理解：jqGrid內部使用jQuery.ajax，而jQuery.ajax使用jQuery.param輔助函數來處理data參數（使用postData進行postData ），如果data是屬性（ postData ），則jQuery.param執行函數。

另外，我autoencode: true建議您在所有網格中使用gridview: true選項（請參見答案 ），添加autoencode: true以將輸入數據解釋為數據而不是HTML片段（這是默認行為），並使用pager: "#pager"而不是pager: jQuery("#pager") 。

我建議您從colModel刪除所有index屬性，並考慮在服務器返回的數據中包含附加的id屬性，並使用來自數據庫的唯一值。 如果網格的某些列已經包含唯一值，則可以將key: true屬性添加到相應列的定義中。 如果您知道jqGrid 必須為網格的每一行分配id屬性，則很容易理解此類更改的原因。 id屬性的值必須唯一。 在文檔中用作rowid的值將在jqGrid的大多數回調中用於標識該行。 如果以后要進行數據編輯，則將相同的值發送到服務器。 如果您未在輸入數據中指定任何rowid，則jqGrid必須為id分配其他值。 默認值為1,2,3 ...另一方面，如果從數據庫中加載數據，則將具有行的本機ID。 將來使用本機ID可以“簡化您的生活”。