在按钮单击时加载 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

重要的是要了解当前代码在创建网格期间设置one 值为postData。 postData 参数的值将是具有在创建网格时评估的属性的对象。

要修复您需要的代码，请使用function 作为postData 属性的值：

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

请参阅the answer 了解更多详情。为了理解：jqGrid内部使用jQuery.ajax，jQuery.ajax使用jQuery.param辅助函数处理data参数（构造使用postData）和jQuery.param如果是data的属性则执行函数（@ 987654335@)。

此外，我强烈建议您在所有网格中使用gridview: true 选项（请参阅the answer），添加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 可以“简化您的生活”。