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

Controller :

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(); }
}

参见the answer更多细节。为了理解:jqGrid 使用 jQuery.ajax内部和jQuery.ajax使用jQuery.param用于处理 data 的辅助函数参数(使用 postData 构造)和 jQuery.param如果是 data 的属性则执行函数(postData)。

此外，我强烈建议您使用 gridview: true所有网格中的选项(请参阅 the answer )，添加 autoencode: true将输入数据解释为数据而不是 HTML 片段(这是默认行为)并使用 pager: "#pager"而不是pager: jQuery("#pager") .

我建议您删除所有index来自colModel的属性并考虑包括额外的 id从服务器返回的数据中的属性具有来自数据库的唯一值。如果网格的某些列已包含唯一值，您可以添加 key: true属性到相应列的定义。如果您知道 jqGrid 必须分配 id，那么这种更改的原因很容易理解。属性到网格的每一行。 id的值属性必须是唯一的。该值在文档中用作 rowid ，将在 jqGrid 的大多数回调中用于标识行。如果您稍后要编辑数据，相同的值将发送到服务器。如果您没有在输入数据中指定任何 rowid jqGrid 必须为 id 分配一些其他值。默认值为 1,2,3... 另一方面，如果您从数据库加载数据，则您将拥有行的 native ID。使用原生 ID 可以在未来“简化您的生活”。