AngularJS und jqGrid

Ich versuche zu finden, ein einfaches Beispiel der Integration jqGrid mit dem framework von AngularJS (vorzugsweise als eine Richtlinie, dass die Gastgeber das raster). Diese Frage wurde angehoben, SO jqGrid mit AngularJS, aber es wurde nicht vollständig beantwortet. Ich möchte nicht, dass andere zu verwenden 3rd-party-Bibliothek an dieser Stelle. Ich möchte sehen, wie die best practice der Integration jqGrid mit AngularJS nur mit dem controller und mv* - Stil-Ansatz.

Gibt es auch eine Eckige jqGrid Kochbuch von Wintellect https://github.com/Wintellect/Angular-MVC-Cookbook, aber es nutzt die $route-Objekt, das ich bin nicht verrückt, zu diesem Zeitpunkt. Ich bin nicht versuchen, zu bauen, ein SPA jetzt (vielleicht später).

Kann jemand bitte zeigen Sie mir ein einfaches Beispiel oder etwas in JSFiddle? Danke.

InformationsquelleAutor Niner | 2013-10-17
  1. 17

    Haftungsausschluss:

    1. Ich habe noch nie gehört, jqGrid vor.

    2. Habe ich nicht viel jQuery-Erfahrung.

    3. Was ich sagen konnte deren API ist nicht förderlich für eine 1-zu-1-mapping von Winkel-Daten-Bindung wird auf diese Weise gegen manuelle manipulation.

    Hier ist, was ich kam mit. Es ist ein einfaches Beispiel, wie man wickeln Sie diese (oder jede wahrscheinlich) jQuery-plugin mit einem Winkel-Richtlinie:

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

    Lassen Sie mich wissen, wenn es ein bestimmtes Teil des jqGrid-API benötigen Sie Hilfe einwickeln.

    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]);
      }
    });
  }
};
});
    • jqGrid ist ein beliebtes grid-plugin - trirand.com/blog. Ich bin so traurig, dass ich nicht finden konnte, eine passende Antwort hier.
    • Was meinst du - haben Sie überprüfen Sie heraus die plunkr? Ich machte eine minimal funktional-wrapper, die ich dachte, war genug, um zu zeigen, wie Sie zu verlängern. Was bedeutet es nicht, dass Sie es brauchen?
    • Vielen Dank für Ihren Kommentar aktualisiert. Irgendwie hab ich das verpasst jqGrid Teil, den Sie hatte in Ihrem Skript, und ich war nicht sehr vertraut mit plunkr das ganze zu sehen. Das ist eigentlich das, was ich suchte, und es dient als gutes Vorbild für mich.
    • Brillant-code... vielen Dank für das teilen. Ich musste nur eine kleine änderung in der "scope.$Uhr('Daten') - Funktion, um zu überprüfen, ob oldValue null war, sonst 'oldValue.Länge' hat eine Ausnahme ausgelöst. Gleiche für newValue in dieser Funktion. Ahhh, es ist schön zu haben, jqGrid zurück !!
    InformationsquelleAutor Words Like Jared
  2. 1

    Ich nicht kommentieren kann, deshalb poste ich es hier, es ist die Kontinuität von der Frage..
    Ich bin auch der überprüfung Ihrer github-Projekt luacassus, wenn ich kann, werde ich dazu beitragen.
    Nettes feature, Worte Wie Jared. Wie du schon sagtest, es gibt noch einen anderen Teil der API möchte ich wrappe mit Eckigen, es ist die "pager", schaffte ich es auf diese Weise :

    $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, um loszuwerden, fo ID eingegeben, den harten Weg hier. Danach werde ich versuchen, die API zu verwenden, wie Sie im Rahmen der Implementierung der Zelle/Zeile/navbar Bearbeiten möglich. (Zum ändern den Umfang der Daten, die durch modifizieren der Daten innerhalb des Rasters... wenn jemand schon etwas...)

    InformationsquelleAutor roro_57
  3. 0

    Im arbeitet derzeit an einem vollständigen Ersatz von jQgrid in Winkel, im-Anpassung der backend-Reaktion Beispiele von jqGrid Tabellen und so... es hat nur ein paar Tage Arbeit, also, wenn Sie wollen, um zu arbeiten Sie sind herzlich eingeladen, dies zu tun!: ngGrid

    InformationsquelleAutor Mijail Dan Cohen
Schreibe einen Kommentar