affichant json imbriqué dans ag-grid

J'utilise Angular Grid (ag-grid) pour afficher des données. J'essaie d'afficher des données json imbriquées dans ma grille angulaire. mais je n'ai pas réussi. Ci-dessous, vous trouverez l'exemple de données json et colDefs. S'il vous plaît suggérer que pourquoi l'opérateur de point ne fonctionne pas contrairement à jqgrid, pour mapper des colonnes de grille avec des champs json imbriqués.affichant json imbriqué dans ag-grid

var app = angular.module('myApp', ['ngGrid']); 
app.controller('MyCtrl', ['$scope', '$http', 
function($scope, $http) { 
$scope.myData = [{ 
"defaultColumns1": {"region":"PA"}, 
"defaultColumns2": {"LocationName": "loc1", 
"LegalName": "legName1" 
} 
}, 
{ 
"defaultColumns1": {"region":"PB"}, 
"defaultColumns2": {"LocationName": "loc2", 
"LegalName": "legName2" 
} 
}]; 

$scope.gridOptions = { 
    data: 'myData', 
    columnDefs: [{ 
    field: 'defaultColumns1.region', 
    displayName: 'Region' 
    }, { 
    field: 'defaultColumns2.LocationName', 
    displayName: 'Location', 
    headerGroup: 'address' 
    }, { 
    field: 'defaultColumns2.LegalName', 
    displayName: 'Legal Name', 
    headerGroup: 'address' 
    }], 
    enableColumnResize: true, 
    groupHeaders : true 
} 
}]);

index.html

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head lang="en"> 
<meta charset="utf-8" /> 
<title>Custom Plunker</title> 
<link rel="stylesheet" href="../dist/ag-grid.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"> </script> 
<script src="http://code.angularjs.org/1.2.15/angular.js"></script> 
<script src="../dist/ag-grid.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 

<script type="text/javascript" src="main.js"></script> 
</head> 

<body ng-controller="MyCtrl"> 
<div class="gridStyle" ag-grid="gridOptions"></div> 
</body></html>

Source

2015-09-30 manjunath

Votre html pls. Un plunkr serait une aide précieuse. – Jax

@Jax J'ai ajouté le code html. Avec bonté, jetez un oeil – manjunath

im gravement frappé à ce stade. Quelqu'un peut-il me suggérer une solution de contournement pour mon problème. ce serait une grande aide .. – manjunath

Il y avait quelques problèmes avec la façon dont vous êtes allé à travers vos données. $ scope.myData est un tableau d'objets, vous devez donc soit le parcourir, soit en extraire les données par index. Aussi votre $ scope.gripOptions n'était pas tout à fait raison. Je viens de suivre le ag-grid docs

Jetez un oeil à cette mise à jour plunker. Le code est assez basique mais il fait ce que je pense que vous voulez. Vous pouvez toujours créer une fonction à itérer sur le tableau (laisser que :-) devoirs)

$scope.myData = [{ 
    "defaultColumns1": { 
    "region": "PA" 
    }, 
    "defaultColumns2": { 
    "LocationName": "loc1", 
    "LegalName": "legName1" 
    }, 
    "name": "name1" 
}, { 
    "defaultColumns1": { 
    "region": "PB" 
    }, 
    "defaultColumns2": { 
    "LocationName": "loc2", 
    "LegalName": "legName2" 
    }, 
    "name": "name2" 
}]; 

var columnDefs = [{ 
    headerName: 'Region', 
    field: 'region' 
}, { 
    headerName: 'Location', 
    field: 'location' 
}, { 
    headerName: 'Legal name', 
    field: 'legal_name' 
}] 

var rowData = [{ 
    region: $scope.myData[0].defaultColumns1.region, 
    location: $scope.myData[0].defaultColumns2.LocationName, 
    legal_name: $scope.myData[0].defaultColumns2.LegalName 
}, { 
    region: $scope.myData[1].defaultColumns1.region, 
    location: $scope.myData[1].defaultColumns2.LocationName, 
    legal_name: $scope.myData[1].defaultColumns2.LegalName 
}, ] 

$scope.gridOptions = { 
    columnDefs: columnDefs, 
    rowData: rowData 
};

Jetez un oeil à la façon $ scope.gridOptions est maintenant construit (comme suggéré dans la documentation.)

J'espère que ça aide.

Source

2015-10-01 08:17:57 Jax

Merci pour votre réponse aimable. Je comprends votre point ici. Je cherchais à mapper les champs json directement sur les données de la ligne sans répéter l'objet json comme vous l'avez expliqué ci-dessus .. Lorsque nous utilisons jqgrid, nous pouvons directement mapper l'objet json imbriqué à rowdata en définissant le chemin dans les colDefs. Je cherchais quelque chose comme ça. Je pense que l'ag-grid ne supporte pas la cartographie des objets json imbriqués. – manjunath

J'obtiens un objet json imbriqué du serveur. Juste à des fins d'illustration, j'ai fourni un simple objet json imbriqué dans mon exemple ci-dessus. – manjunath

La réponse fournie répond à la question telle que postée à l'origine. Si c'est le cas accepter la réponse est coutumier. Si vous avez un cas d'utilisation différent, vous devriez poser une nouvelle question. – Jax

ag-grille champ attribut ne peut se référer à une propriété de la ligne de données, mais le valueGetter attribut permet des expressions. Ainsi, alors que

field: 'defaultColumns1.region'

ne fonctionne pas, le passage à

valueGetter: 'defaultColumns1.region'

fonctionne très bien. Échantillon plunker fourchu à partir de la vôtre est à http://plnkr.co/edit/8enzrjt2MQwfa8VjGaIy?p=preview

Source

2016-04-24 09:32:44

Que suggérez-vous si 'defaultColumns1' est un tableau et tout ce dont j'ai besoin est' defaultColumns1 [0] .fieldName'? –

Le plus simple est probablement un getter de valeur, c'est-à-dire 'valueGetter: 'defaultColumns1 [0].fieldName'' Pour un travail plus compliqué, j'ai trouvé que les éditeurs personnalisés sont très pratiques - ceux qui vous permettent d'écrire un initialiseur, un constructeur de gui, l'entrée et la sortie gestionnaires, etc. –

affichant json imbriqué dans ag-grid

Répondre

Questions connexes