我正在使用 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);
}
最佳答案
重要的是要了解当前代码设置了 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 可以在未来“简化您的生活”。
关于javascript - 单击按钮时加载 jqGrid 但第二次失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27618817/