jQuery Girl
  1. jQuery Girl
  3. jqGrid-> treeGrid ne fonctionne pas avec ma directive angular
Intereting Posts
Objet JSON renvoyant avec des valeurs mais affichant undefined Javascript faisant tourner l’image pour toujours regarder le curseur de la souris? Regex for Date Validation en javascript TypeError non capturé: $ (…) .owlCarousel n’est pas une fonction JQuery conflit avec des scripts identiques fonction document.ready appelée à nouveau après le bouton d’envoi? JQuery jqgrid ne sortinge pas côté client javascript: obtention de l’index td L’événement du bouton ne fonctionne pas après avoir cliqué sur le titre du bouton ou sur l’icône du bouton comment puis-je obtenir des données de ligne de table avec jQuery jquery – Puis-je récupérer (événement, xhr, options) à partir de .ajaxStart ou .ajaxStop? API Google Maps v3 + conflit jQuery? jQuery UI autocomplete – that._renderItemData n’est pas une fonction Evénement de clic jQuery non déclenché sur le bouton à l’intérieur du formulaire Différence entre jQuery.one () et jQuery.on ()

jqGrid-> treeGrid ne fonctionne pas avec ma directive angular

J’utilise JqGrid avec directive pour angularJS. par exemple, j’utilise le code de cette jqgrid en chargeant des données json du serveur dans treegrid n’affiche pas les données

c’est directive: 

.directive('ngJqGrid', function () { return { ressortingct: 'E', scope: { config: '=', data: '=', }, link: function (scope, element, attrs) { var table; scope.$watch('config', function (newValue) { element.children().empty(); table = angular.element('
'); element.append(table); $(table).jqGrid(newValue); }); scope.$watch('data', function (newValue, oldValue) { var i; for (i = oldValue.length - 1; i >= 0; i--) { $(table).jqGrid('delRowData', i); } for (i = 0; i < newValue.length; i++) { $(table).jqGrid('addRowData', i, newValue[i]); } }); } }; });

Et c’est le code du contrôleur angular: 

 $scope.data = {}; $http.get('home/GetDataJson').success(function (data, status, headers, config) { $scope.config = { datatype: "json", colNames: ['id', 'Prestations'], colModel: [ { name: 'id', width: 100, key: true }, { name: 'name', width: 785, sortable: false } ], sortname: 'id', sortorder: "asc", treeGrid: true, treeGridModel: "adjacency", ExpandColumn: 'name', ExpandColClick: true, jsonReader: { repeatitems: false, root: function (obj) { return obj; } }, height: "auto" } $scope.data = data; });

Ce sont des données JSON: 

 [ { "id": "1", "name": "ECHANGEUR", "level": "0", "parent": "null", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1", "name": "Intervention Aller sur Site", "level": "1", "parent": "1", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1_1", "name": "Date et heure d'arrivée sur le site", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true }, { "id": "1_1_2", "name": "Consignation de l'échangeur", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true } ]

La grid apparaît, mais la fonctionnalité treeGrid ne fonctionne pas. Au lieu de toutes les lignes sont développées, nous pouvons donc penser que cela ne concerne que la grid, mais pas treeGrid. Peut être un problème dans la directive. Aidez-moi, s’il vous plaît! Je vous remercie!

Pour voir mon problème, veuillez ouvrir ce lien http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=preview et remplacer 2 fichiers HTML et JavaScript JS: 

 var myApp = angular.module('myApp', []); myApp.directive('ngJqGrid', function() { return { ressortingct: 'E', scope: { config: '=', data: '=', }, link: function(scope, element, attrs) { var table; scope.$watch('config', function(newValue) { element.children().empty(); table = angular.element('
'); element.append(table); $(table).jqGrid(newValue); }); scope.$watch('data', function(newValue, oldValue) { var i; for (i = oldValue.length - 1; i >= 0; i--) { $(table).jqGrid('delRowData', i); } for (i = 0; i < newValue.length; i++) { $(table).jqGrid('addRowData', i, newValue[i]); } }); } }; }); myApp.controller('MyController', function($scope) { $scope.config = { datatype: "local", colNames: ['id', 'Prestations'], colModel: [{ name: 'id', width: 100, key: true }, { name: 'name', width: 785, sortable: false }], sortname: 'id', sortorder: "asc", treeGrid: true, treeGridModel: "adjacency", ExpandColumn: 'name', ExpandColClick: true, jsonReader: { repeatitems: false, root: function(obj) { return obj; } }, height: "auto" } $scope.data = [{ "id": "1", "name": "ECHANGEUR", "level": "0", "parent": "null", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1", "name": "Intervention Aller sur Site", "level": "1", "parent": "1", "isLeaf": false, "expanded": false, "loaded": true }, { "id": "1_1_1", "name": "Date et heure d'arrivée sur le site", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true }, { "id": "1_1_2", "name": "Consignation de l'échangeur", "level": "2", "parent": "1_1", "isLeaf": true, "expanded": true, "loaded": true }]; });

HTML:

Désolé pour ma petite expérience 🙂 Merci! 

 scope.$watch('data', function (newValue, oldValue) { table[0].addJSONData({ rows: newValue }); });