Implémentation d'une grid avec Angularjs

**flamant** · 30/10/2015, 23h17

Bonjour,

j'essaye d'implémenter une grid (ui-grid) et je n'y arrive pas

Voici mon fichier html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="bower_components/ui-grid/ui-grid.js"></script>
  <script src="bower_components/ui-grid/ui-grid.css"></script>  
  <script src="js/controllers.js"></script>
 
</head>
<body ng-controller="PhoneListCtrl">
 
  <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
 
</body>
</html>

Voici mon controller et une directive

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
var phonecatApp = angular.module('phonecatApp', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping']);
phonecatApp.directive('fakemax', function () {
    return function(scope, iElement, iAttrs) {
        var value = iAttrs.val;
        value = value.replace("max:", "");
        iElement[0].innerHTML = value;
    }
});
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function($scope, $http, $interval, uiGridGroupingConstants ) {
  console.log('ca passe');
  $scope.gridOptions = {
    enableFiltering: true,
    treeRowHeaderAlwaysVisible: false,
    columnDefs: [
      { name: 'a',field: 'a', displayName: 'A' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'b',field: 'b', displayName: 'B' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'c',field: 'c', displayName: 'C' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'd',field: 'd', displayName: 'D' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'e',field: 'e', displayName: 'E' , width: '2%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'id',field: 'id', displayName: 'N° CF', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'asc' }, width: '10%', cellTemplate: '<span ng-if="row.groupHeader && col.grouping.groupPriority === row.treeLevel">{{row.getProperty(col.field)}}</span><span ng-if="!(row.groupHeader && col.grouping.groupPriority === row.treeLevel)">{{row.entity.partNumber}}</span>' },
      { name: 'description',field: 'description', displayName: 'Description', width: '30%', cellTemplate: '<span ng-if="row.groupHeader && col.grouping.groupPriority === row.treeLevel">{{row.getProperty(col.field)}}</span><span ng-if="!(row.groupHeader && col.grouping.groupPriority === row.treeLevel)">{{row.entity.partDescription}}</span>' },
      { name: 'manufacSiteCode',field: 'manufacSiteCode', displayName: 'Manufactoring Site Code' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'nissanLocalCode',field: 'nissanLocalCode', displayName: 'Nissan Local code' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'supplierName',field: 'supplierName', displayName: 'Supplier Name' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'town',field: 'town', displayName: 'Town' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'},
      { name: 'partNumber',field: 'partNumber', visible: false },
      { name: 'partDescription',field: 'partDescription', visible: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };  
  $http.get('phones/phones1.json').success(function(data) {
    $scope.gridOptions.data = data;
  });
 
  $scope.orderProp = 'age';
}]);

déjà ici je ne suis pas arrivé à trouver où télécharger "ui.grid.grouping" et "uiGridGroupingConstants"

Et voici un extrait de mon fichier Json pour mes data (je sais qu'il est valide)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
[
    {
        "description": "description1", 
	    "a": 1, 
	    "b": 3,
	    "c": 3,  
	    "d": 2, 
	    "e": 3, 
        "id": 1000, 
        "manufacSiteCode": "manufacSiteCode1", 
        "nissanLocalCode": "nissanLocalCode1", 
        "supplierName": "supplierName1",
	    "town": "town1",
	    "partNumber": "part1",
	    "partDescription": "partDescription1"
    }, 
    {
        "description": "description1", 
	    "a": 1, 
	    "b": 3,
	    "c": 3,  
	"d": 2, 
	"e": 3, 
        "id": 1000, 
        "manufacSiteCode": "manufacSiteCode1", 
        "nissanLocalCode": "nissanLocalCode1", 
        "supplierName": "supplierName1",
	"town": "town1",
	"partNumber": "part2",
	"partDescription": "partDescription2"
    }, ...
....
]

La page que j'obtient est la suivante
Nom : Capture d’écran 2015-10-30 à 23.10.58.png
Affichages : 301
Taille : 35,6 Ko

Suite .................

Nom : Capture d’écran 2015-10-30 à 23.12.08.png
Affichages : 299
Taille : 11,2 Ko

Et les logs que j'obtiens dans ma console Firebug sont les suivants

Couleur attendue, mais « auto » trouvé. Couleur attendue, mais « -webkit-focus-ring-color » trouvé. Une fin de valeur était attendue, mais « -webkit-focus-ring-color » a été trouvé. Erreur d'analyse de la valeur pour « outline ». Déclaration abandonnée. bootstrap.css:1681:15
Pseudo-classe ou pseudo-élément « -ms-input-placeholder » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. bootstrap.css:1718:14
Pseudo-classe ou pseudo-élément « -webkit-input-placeholder » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. bootstrap.css:1721:15
Propriété « user-select » inconnue. Déclaration abandonnée. bootstrap.css:2007:21
Couleur attendue, mais « auto » trouvé. Couleur attendue, mais « -webkit-focus-ring-color » trouvé. Une fin de valeur était attendue, mais « -webkit-focus-ring-color » a été trouvé. Erreur d'analyse de la valeur pour « outline ». Déclaration abandonnée. bootstrap.css:2016:15
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:2036:10
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:3074:10
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4540:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4552:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4559:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4566:20
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:4573:20
Propriété « zoom » inconnue. Déclaration abandonnée. bootstrap.css:4579:6
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5066:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5074:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5140:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5144:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5204:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5208:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5472:10
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:5476:20
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5478:10
Erreur d'analyse de la valeur pour « background-image ». Déclaration abandonnée. bootstrap.css:5484:20
« none », URL, ou fonction filter attendu, mais « progid » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5486:10
« none », URL, ou fonction filter attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée. bootstrap.css:5493:10
Une fin de valeur était attendue, mais « \9 » a été trouvé. Erreur d'analyse de la valeur pour « background-color ». Déclaration abandonnée. bootstrap.css:5546:25
SyntaxError: illegal character ui-grid.css:5:0
ca passe controllers.js:14:3
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:1:6
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:1:19
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:5:10
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:5:43
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:5:77
Erreur d'analyse de la valeur pour « height ». Déclaration abandonnée. index.html:6:14
Déclaration attendue, mais « { » trouvé. Passage à la déclaration suivante. index.html:9:10
Erreur d'analyse de la valeur pour « border-bottom-width ». Déclaration abandonnée. index.html:10:27
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:13:4
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:14:4
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. index.html:22:4
Erreur d'analyse de la valeur pour « margin-left ». Déclaration abandonnée. index.html
« : » attendus, mais « } » trouvé. Déclaration abandonnée. index.html

Merci d'avance pour votre aide

Implémentation d'une grid avec Angularjs

AngularJS

Mode arborescent

Discussions similaires

Partager

Partager