格式化程序在排序或搜索后给出错误结果
我有以下代码使用free-jqgrid。它第一次正确加载(Status为“Active”,Partner?为“Yes”)。但是,当我进行排序或搜索时,值会变得不正确(状态为“退休”,合作伙伴?为“否”)。格式化程序在排序或搜索后给出错误结果
为什么格式化程序提供的值不正确?如何解决这个问题?
SCRIPT
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css" rel="stylesheet" />
<script type="text/javascript">
function getCurrentPractice()
{
return "Test";
}
function getGridCaption() {
return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
"<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
"<div style='float:right;width:550px; padding-bottom:20px;'>" +
"<input type='text' class='form-control' id='filter' placeholder='Search' style='width:250px; height:30px; float:right; ' />" +
" </div>" +
"</div>";
}
$(function() {
var currentPractice = "P";
var grid = $("#list2");
grid.jqGrid({
url: '/Home/GetProviders',
datatype: "json",
postData:
{
practiceName: function() { return currentPractice }
},
colNames: [
'Practice',
'ProviderID',
'Partner?',
'Status'
],
colModel: [
{ name: 'Practice', hidden: false },
{ name: 'ProviderID', hidden: false },
{
name: 'PartnerStatusText',
width: 70,
formatter: function (cellvalue, options, rowObject) {
var isPartner = rowObject.IsPartner;
return isPartner == true ? 'Yes' : 'No';
}
},
{
name: 'ActiveStatusText',
width: 70,
formatter: function (cellvalue, options, rowObject) {
var isActive = rowObject.IsActive;
return isActive == true ? 'Active' : 'Retired';
}
}
],
ignoreCase: true,
loadonce: true,
rowNum: 25,
rowList: [15, 25, 35, 50],
pager: '#pager2',
viewrecords: true,
sortable: true,
caption: getGridCaption(),
beforeSelectRow: function (rowid, e) {
//Avoid selection of row
return false;
},
loadComplete: function() {
}
});
grid.jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
//Filter Toolbar
$("#advancedSearch").click(function() {
grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});
//Top Search
$("#filter").on('keyup', function() {
var searchFiler = $("#filter").val(), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, { filters: "" });
}
f = { groupOp: "OR", rules: [] };
f.rules.push({ field: "Practice", op: "cn", data: searchFiler });
grid[0].p.search = true;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1, current: true }]);
});
});
</script>
</head>
HTML
<div style="float:left; border:1px solid red;">
<div id="divGrid" style="width: 680px; min-height: 50px; float: left; border: 1px solid silver;">
<table id="list2"></table>
<div id="pager2"></div>
</div>
</div>
服务器代码
[AllowAnonymous]
public JsonResult GetProviders(string practiceName)
{
//System.Threading.Thread.Sleep(3000);
List<Provider> providers = new List<Provider>();
Provider p = new Provider();
p.Practice = "Test1";
p.ProviderID = 1;
p.IsActive = true;
p.IsPartner = true;
providers.Add(p);
Provider p2 = new Provider();
p2.Practice = "Test2";
p2.ProviderID = 2;
p2.IsActive = true;
p2.IsPartner = true;
providers.Add(p2);
return Json(providers, JsonRequestBehavior.AllowGet);
}
ü PDATE
感谢Oleg,工作演示可以在这里找到 - Fiddle。它使用JSFiddle的"/echo/json/"
服务从服务器获取数据。它使用sorttype
和additionalProperties
。这可以在没有additionalProperties
的情况下重写 - 当我有机会重新访问时,我需要这样做。
这个问题似乎很容易。从服务器返回的数据包含属性Practice
,ProviderID
,IsActive
和IsPartner
。在初始加载期间,该属性可在rowObject
中获得。您另外使用loadonce: true
选项。因此,免费的jqGrid会尝试在本地保存一些数据,但哪一个?默认情况下,jqGrid会保存与列名对应的属性:Practice
,ProviderID
,PartnerStatusText
和ActiveStatusText
,但jqGrid没有其他属性IsActive
和IsPartner
也需要保存。
您可以通过两种可选的方式解决问题:
- 重命名列名
PartnerStatusText
和ActiveStatusText
到IsActive
和IsPartner
。 - 您添加选项
additionalProperties: ["IsActive", "IsPartner"]
以通知jqGrid读取并保存本地其他属性。
此外,我建议您在自定义格式化程序中使用options.rowData
而不是rowObject
。您可以跳过三维参数并使用formatter: function (cellvalue, options) {...}
。
最后一句:自定义格式化程序的当前代码非常简单。您需要将一些输入值(true
和false
)替换为另一个文本。人们可以使用formatter: "select"
的情况:
colModel: [
{ name: "Practice" },
{ name: "ProviderID" },
{
name: "IsPartner",
width: 70,
formatter: "select",
formatoptions: { value: "false:No;true:Yes" }
},
{
name: "IsActive",
width: 70,
formatter: "select",
formatoptions: { value: "false:Retired;true:Active" }
}
],
完美。我使用'additionalProperties'方法。很好的解释 - “jqGrid默认保存与列名对应的属性”。谢谢。 – Lijo
@Lijo:不客气!我建议你总是升级到免费的jqGrid的最新版本(目前它是4.14.0)。 – Oleg
@Lijo:[README](https://github.com/free-jqgrid/jqGrid/blob/master/README.md)包含这些URL。 [wiki文章](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)包含更多详细信息,包括“完整性”值。我建议你另外阅读[新功能]的列表(https://github.com/free-jqgrid/jqGrid/blob/master/README.md#new-main-features-implemented-in-the-version- 4140-相比与 - 4136)。例如[demo](https://jsfiddle.net/OlegKi/yvbt6w54/1/)演示了'searchoptions' /'editoptions'的'value'的自动生成。 – Oleg