Meine Anforderung ist, dass ich eine Daten in einem Raster mit Pagination.Its readonly anzeigen und keine Bearbeitung erforderlich ist. Ich suchte nach vielen Plugins und ich fand schließlich dieses ParamQuery Grid aus Jquery.ParamQuery Jquery Grid-Plugin zeigt keine Daten an
Jetzt ist mein Controller mir ein Viewmodel-Objekt zu senden, die in ihm zwei Eigenschaften aufweisen. Eine ist eine Customer-Eigenschaft, die vom Typ CustomerModel ist, und eine ist eine PaymentSummary-Eigenschaft, bei der es sich um eine Liste handelt. Also bevölkere ich beides und sende es zum View. Und in der Ansicht versuche ich den untenstehenden Code. Das Ergebnis ist, dass ich die Anzahl der Zeilen entsprechend erhalte, aber die Zeilen sind leer. Das heißt, mein Recordset aus db gibt 125 Zeilen zurück und ich kann 125 Zeilen im Raster sehen, aber ich kann die Daten nicht sehen. Nicht sicher, was das Problem ist. Ich nehme es mit dem Datenformat an. Könnte mir bitte jemand dabei helfen? Ich konvertiere mein Modell in ein json-Objekt, aber es sieht so aus, als würde es ein Array aufnehmen. Also nicht sicher, ob das der Grund sein könnte.
<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 (Wert) \t Rendert Wert als HTML-Markup, anstatt es als HTML-codierte Ausgabe zu rendern. (von w3schools) Aber pqGrid benötigt Daten im JSON-Format wie [{prop1: value1, prop2: value2, prop3: value3}, {prop1: value1, prop2: value2, prop3: value3}, {prop1: value1, prop2: value2, prop3: value3}]. Aus diesem Grund zeigt es die korrekte Anzahl von Zeilen an, aber da es die Daten nicht lesen kann, kann es nicht im Raster angezeigt werden. – zaffer
Ändern wahrscheinlich in var model = JSON.parse ('@ Html.Raw (Json.Encode (Model.PaymentSummaryList))'); sollte den Trick tun. – zaffer