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

有关详细信息，请参阅the answer。为了理解：jqGrid在内部使用jQuery.ajax，jQuery.ajax使用jQuery.param辅助函数来处理data参数（使用postData构造）和jQuery.param执行函数，如果它是data（postData）的属性。

此外，我强烈建议您在所有网格中使用gridview: true选项（请参阅the answer），添加autoencode: true以将输入数据解释为数据而不是HTML片段（&& ＃39;是默认行为）并使用pager: "#pager"代替pager: jQuery("#pager")。

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

单击按钮时加载jqGrid但第二次失败

1 个答案: