AngularJS und jqGrid

Question

Ich versuche, ein einfaches Beispiel für die Integration von jqGrid mit dem Framework von AngularJS (vorzugsweise als eine Richtlinie, die das Gitter hostet) zu finden. Diese Frage wurde in SO jqGrid with AngularJS gestellt, aber sie wurde nicht vollständig beantwortet. Ich möchte zu diesem Zeitpunkt keine andere 3rd-Party-Bibliothek verwenden. Ich würde gerne die beste Praxis der Integration von jqGrid mit AngularJS mit nur dem Controller und mv * Stil Ansatz sehen.

Es gibt auch ein Angular jqGrid Kochbuch von Wintellect https://github.com/Wintellect/Angular-MVC-Cookbook, aber es verwendet das $ route-Objekt, an dem ich jetzt nicht verrückt bin. Ich versuche nicht gerade jetzt (vielleicht später) ein SPA zu bauen.

Kann mir bitte jemand ein einfaches Beispiel oder etwas in JSFiddle zeigen? Vielen Dank.

Answer 1

Impressum:

1. Ich habe noch nie von jqGrid gehört.

2. Ich habe nicht viel jQuery Erfahrung.

3. Von dem, was ich sagen konnte, ist seine API nicht förderlich für eine 1-zu-1-Zuordnung von Angulars datenbindendem Weg, dies zu tun, im Gegensatz zu manueller Manipulation.

Hier ist, was ich gefunden habe. Es ist ein einfaches Beispiel dafür, wie dies zu umwickeln (oder jede wahrscheinlich) jQuery-Plugin mit einer Winkel Richtlinie:

http://plnkr.co/edit/50dagqDV2hWE2UxG9Zjo?p=preview

Lassen Sie mich wissen, ob es einen bestimmten Teil der API jqGrid ist Sie Hilfe Verpackung benötigen.

var myApp = angular.module('myApp', []); 

myApp.directive('ngJqGrid', function() { 
return { 
    restrict: 'E', 
    scope: { 
    config: '=', 
    data: '=', 
    }, 
    link: function (scope, element, attrs) { 
    var table; 

    scope.$watch('config', function (newValue) { 
     element.children().empty(); 
     table = angular.element('<table></table>'); 
     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]); 
     } 
    }); 
    } 
}; 
}); 

Answer 2

kann ich nicht kommentieren, so dass ich es hier posten, ist es die Kontinuität der Frage ist .. ich Ihr GitHub Projekt luacassus auch bin Überprüfung, wenn ich kann, ich es beitragen. Schöne Eigenschaft, Wörter wie Jared. Wie Sie sagten, es ein anderer Teil der API ist, würde ich mit kantigem Wrappe mag, es ist der „Pager“ ist, konnte ich es so:

$scope.config = { 
    ... 
    rowList:[10,20,30], 
    pager: '#pager2', 
    sortname: 'id', 
    ... 
}; 

Und dies in der Richtlinie:

link: function(scope,element,attrs){ 
      var table; 
      scope.$watch('config', function (newValue) { 
       element.children().empty(); 
       table = angular.element('<table id=\'grid2\'></table>'); 
       pager = angular.element('<div id=\'pager2\' ></div>'); 
       element.append(table); 
       element.append(pager); 
       $(table).jqGrid(newValue); 
      }); 

Aber ich möchte für die ID loswerden, ging hier auf die harte Tour. Danach werde ich versuchen, die API wie Sie zu verwenden, um die Zelle/Zeile/Navbar Bearbeitung möglich zu implementieren. (Um die Scope-Daten zu modifizieren, indem man Daten innerhalb des Grids ändert ... wenn jemand schon etwas hat ...)

Answer 3

Im Moment arbeite ich an einem vollständigen Ersatz von jQgrid in Angular, im Anpassen von Backend-Antwortbeispielen aus jqGrid-Tabellen und so ... es hat nur ein paar Tage Arbeit, also wenn Sie zusammenarbeiten möchten, sind Sie herzlich eingeladen, dies zu tun !: ngGrid