AngularJS e jqGrid

Question

Sto cercando di trovare un semplice esempio di integrazione di jqGrid con il framework di AngularJS (preferibilmente come una direttiva che ospita la griglia). Questa domanda è stata sollevata in SO jqGrid with AngularJS, ma non è stata data una risposta completa. Non desidero utilizzare un'altra libreria di terze parti a questo punto. Mi piacerebbe vedere la migliore pratica di integrazione di jqGrid con AngularJS con il solo approccio controller e mv *.

C'è anche un libro di cucina Angular jqGrid di Wintellect https://github.com/Wintellect/Angular-MVC-Cookbook, ma utilizza l'oggetto $ route di cui non sono pazzo a questo punto. Non sto cercando di costruire una SPA adesso (forse più tardi).

Qualcuno può indicarmi un semplice esempio o qualcosa in JSFiddle? Grazie.

Answer 1

Avvertenze:

1. non ho mai sentito parlare di jqGrid prima.

2. Non ho molta esperienza di jQuery.

3. Da quello che ho potuto dire la sua API non è favorevole a una mappatura 1-a-1 del modo vincolante dei dati di Angular di fare questo contro la manipolazione manuale.

Ecco cosa mi è venuto in mente. E 'un esempio di base di come avvolgere questo (o qualsiasi probabilmente) plugin per jQuery con una direttiva angolare:

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

farmi sapere se c'è una particolare parte del API jqGrid hai bisogno di aiuto da imballaggio.

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

non posso commentare, così ho postare qui, è la continuità della domanda .. Sto anche controllare il vostro progetto github luacassus, se posso, voglio contribuire ad esso. Funzionalità piacevole, parole come Jared. Come hai detto, c'è un altra parte del API vorrei wrappe con angolare, è il "pager", sono riuscito in questo modo:

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

E questo nella direttiva:

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); 
      }); 

Ma mi piacerebbe sbarazzarmi dell'ID, inserito nel modo più duro qui. Dopodiché cercherò di utilizzare l'API come te per implementare la modifica cell/row/navbar possibile. (Per modificare i dati dell'oscilloscopio modificando i dati all'interno della griglia ... se qualcuno ha già qualcosa ...)

Answer 3

Attualmente sto lavorando su una sostituzione completa di jQgrid in Angolare, im adattando esempi di risposta backend da tabelle jqGrid e simili ... ha solo pochi giorni di lavoro quindi se vuoi collaborare sei invitato a farlo !: ngGrid