i ont la configuration suivante pour la version pivot Jqgrid
cela a été extrait de code for pivot mais quand il a couru donné une erreur javascript
pourquoi jqGrid ne se charge pas?
de SCRIPT5007: Impossible d'obtenir la propriété « longueur » de référence jquery.jqGrid non définie ou nulle. min.js, ligne 504 caractère 98
comment résoudre ce problème?
les données se présente comme json
de C#
voici mon action MVC
[AllowAnonymous]
[HttpGet]
public JsonResult GetProducts() {
var coll = new List<SampleProductModel>();
//"CategoryName":"Beverages","ProductName":"Steeleye Stout","Country":"UK","Price":"1008.0000","Quantity":"65"
var p1 = new SampleProductModel { CategoryName = "Beverages", ProductName = "Steeleye Stout", Country = "UK", Price = "1008.0000", Quantity = "65" };
coll.Add(p1);
//"CategoryName":"Beverages","ProductName":"Steeleye Stout","Country":"UK","Price":"1008.0000","Quantity":"65"
var p2 = new SampleProductModel { CategoryName = "Beverages", ProductName = "Big John", Country = "UK", Price = "1008.0000", Quantity = "65" };
coll.Add(p2);
//{"CategoryName":"Beverages","ProductName":"Laughing Lumberjack Lager","Country":"USA","Price":"140.0000","Quantity":"10"},
var p3 = new SampleProductModel { CategoryName = "Beverages", ProductName = "Laughing Lumberjack Lager", Country = "USA", Price = "140.0000", Quantity = "10" };
coll.Add(p3);
//{"CategoryName":"Beverages","ProductName":"Laughing Lumberjack Lager","Country":"USA","Price":"140.0000","Quantity":"10"},
var p4 = new SampleProductModel { CategoryName = "Beverages", ProductName = "Jims", Country = "USA", Price = "140.0000", Quantity = "10" };
coll.Add(p4);
return Json(coll, JsonRequestBehavior.AllowGet);
}
ici est mon code qui a été extrait à partir du lien ci-dessus et modifié pour prendre des données C# JSON
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/start/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#grid").jqGrid('jqPivot',
"http://localhost:53721/Home/GetProducts",
// pivot options
{
xDimension : [
{dataName: 'CategoryName', label : 'Category', width: 90},
{dataName: 'ProductName', label : 'Product', width:90}
],
yDimension : [
{dataName: 'Country'}
],
aggregates : [
{member : 'Price', aggregator : 'sum', width:50, label:'Sum'},
{member : 'Quantity', aggregator : 'sum', width:50, label:'Qty'}
],
rowTotals: true,
colTotals : true
},
// grid options
{
width: 700,
rowNum : 10,
pager: "#pager",
caption: "Amounts and quantity by category and product"
});
})
</script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
</body>
</html>
Vous essayez de charger les données de 'ports 53721', il ne fonctionnera pas si ce n'est pas le même port à partir de laquelle la page HTML est chargée. Voir [la même politique d'origine] (https://en.wikipedia.org/wiki/Same-origin_policy). De plus, vous ne devriez jamais poster une erreur dans 'jquery.jqGrid.min.js'. Vous devriez refaire le test en utilisant la version 'jquery.jqGrid.src.js' et envoyer le message d'erreur correspondant. Vous devez inclure 'grid.locale-en.js' avant' jquery.jqGrid.min.js' (ou 'jquery.jqGrid.src.js'). – Oleg