私の要件は、ページ番号付きのグリッドにデータを表示する必要があります。読み込み専用で編集は不要です。多くのプラグインを検索したところ、このParamQuery Gridがjquery。今私のコントローラは、私にそれで2つのプロパティを持っているのViewModelオブジェクトを送信しているParamQuery Jquery Gridプラグインでデータが表示されない
。 1つはCustomerModel型のCustomerプロパティで、もう1つはPaymentSummaryプロパティです。だから、私は両方を移入し、ビューに送信します。そして、私は以下のコードを試している。結果は適切に行数を取得していますが、行はすべて空白です。意味、dbからの私のレコードセットは125行を返しています、そして、私はグリッドで125行を見ることができますが、私はデータを見ることができません。問題が何であるか分かりません。私はデータ形式でそれを仮定しています。誰かが私にこれを手伝ってもらえますか?私はモデルをjsonオブジェクトに変換していますが、配列をとっているようです。それが理由であるかどうかは分かりません。
<html>
<head>
<!--jQuery dependencies-->
<script src="~/Scripts/jquery.min.js"></script>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<script
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-
ui.min.js"></script>
<!--PQ Grid files-->
<link href="~/Content/pqgrid.min.css" rel="stylesheet" />
<script src="~/Scripts/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link href="~/Content/pqgrid_office_theme.css" rel="stylesheet" />
<title>Test</title>
<script type="text/javascript">
$(function() {
//var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
//[2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
// [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
// [4, 'BP', '267,600.0', '22,341.0'],
// [5, 'General Motors', '192,604.0', '-10,567.0'],
// [6, 'Chevron', '189,481.0', '14,099.0'],
// [9, 'Ford Motor', '177,210.0', '2,024.0'],
// [10, 'ConocoPhillips', '166,683.0', '13,529.0'],
// [11, 'General Electric', '157,153.0', '16,353.0'],
// [12, 'Total', '152,360.7', '15,250.0'],
// [13, 'ING Group', '138,235.3', '8,958.9'],
// [14, 'Citigroup', '131,045.0', '24,589.0'],
// [15, 'AXA', '129,839.2', '5,186.5'],
// [16, 'Allianz', '121,406.0', '5,442.4'],
// [20, 'American Intl. Group', '108,905.0', '10,477.0']];
var data = @Html.Raw(Json.Encode(@Model.PaymentSummaryList));
var obj = {
width: 700, height: 300,
title: "Grid From Array",
numberCell: { resizable: true, title: "#" },
editable: false,
flexWidth: true,
showBottom: false,
resizable: true
};
obj.colModel = [
{ title: "Payment Received", width: 100, dataType: "string" },
{ title: "Interest", width: 200, dataType: "string" },
{ title: "PaymentDue", width: 150, dataType: "string", align:
"right" },
{ title: "Principal", width: 150, dataType: "string", align: "right"
}
];
obj.dataModel = { data: data };
var $grid = $("#grid_array").pqGrid(obj);
});
</script>
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
</body>
</html>
Html.Raw(値)\t値をHTMLエンコードされた出力としてレンダリングするのではなく、HTMLマークアップとしてレンダリングします。 (w3schoolsから) しかしpqGridでは、{prop1:value1、prop2:value2、prop3:value3}、{prop1:value1、prop2:value2、prop3:value3}、{prop1:value1、prop2: value2、prop3:value3}]。そのため、正しい行数が表示されますが、データを読み取ることができないため、グリッドに表示することはできません。 – zaffer
おそらくそれを に変更します。var model = JSON.parse( '@ Html.Raw(Json.Encode(Model.PaymentSummaryList))); はこのトリックを行う必要があります。 – zaffer