1
私はfree-jqgridを使って次のコードを書いています。初めて正しく読み込まれます（ステータスは「アクティブ」、パートナーは「はい」）。しかし、並べ替えや検索を行うと、値が不正確になります（ステータスは「Retired」、パートナーは「No」）。並べ替えや検索後にフォーマットが間違っている
フォーマッタが間違った値を与えているのはなぜですか？これを修正するには？
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);
}
U PDATE
Olegのおかげで、作業デモはFiddleにあります。これは、サーバーからデータを取得するためにJSFiddleの"/echo/json/"サービスを使用します。
sorttypeとadditionalPropertiesを使用します。これはadditionalPropertiesなしで書き直すことができます - 私はこれを再訪する機会が得られたらそれを行う必要があります。
パーフェクトを参照してください。私は '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-new-main-features-new-main-features-new-main-features） 4140と比較して4136）。例えば[デモ]（https://jsfiddle.net/OlegKi/yvbt6w54/1/）は 'searchoptions' /' editoptions'の 'value'の自動生成を示しています。 – Oleg