DataGrid modifiable dans AngularJS

Existe-t-il un module AngularJS comme pour DataGrid qui fournit une édition en ligne? Il y en a un dans KendoUI http://demos.kendoui.com/web/grid/editing-inline.html

AngularJS & KendoUI peuvent-ils être utilisés ensemble?

vérifier l’ interface utilisateur

la modélisation, la virtualisation, la simple liaison de données pour les sélections, le regroupement, etc.

Examinez cet exemple assez générique, où je boucle d’abord par des lignes, puis par des colonnes. puis un simple changement entre une plage et un champ de saisie. http://jsfiddle.net/3BVMm/3/

Cela vous permettrait de réaliser des modifications en ligne avec quelques lignes de code.

MAIS: ça ne marche pas comme prévu, car il semble y avoir un bug, que j’ai déjà posté sur angular.

Vous pouvez également utiliser Smart Table.

Exemple, double-cliquez sur un élément dans la colonne solde: http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview

label: 'Balance', map: 'balance', isEditable: true, type: 'number', 

Il existe un exemple d’édition en ligne sur la page d’accueil sous Modifier la section cellule . Le mode d’édition de cellule est entré avec un double clic.

Github: lorenzofox3 / Smart-Table

Il comporte des fonctionnalités telles que la pagination, le sorting, le filtrage, le formatage des données, la sélection des lignes et génère également une structure de tableau simple facilitant le style / la personnalisation.

Vous pouvez également essayer angular-xeditable.
Pour les tableaux suivants:

  • ligne modifiable
  • colonne modifiable
  • grid éditable

Kendo travaille sur AngularJS http://kendo-labs.github.io/angular-kendo/

La grid Angular Grid est capable d’effectuer des modifications en ligne. C’est une directive AngularJS, donc connectez-vous à votre application Angular. Vient également avec d’autres caractéristiques de grid standard (sélection, filtrage, etc.).

La page de documentation pour l’édition est ici

Pour effectuer une modification, définissez editable sur true dans la définition de la colonne, à savoir:

 colDef.editable = true; 

Par défaut, la grid est gérée en tant que valeur de chaîne. Si vous souhaitez effectuer une gestion personnalisée de la cellule, par exemple pour la convertir en un entier ou pour faire une validation, vous fournissez un newValueHandler sur la définition de la colonne, à savoir:

 colDef.newValueHAndler = function(params) { var valueAsNumber = parseInt(params.newValue); if (isNaN(valueAsNumber)) { window.alert("Invalid value " + params.newValue + ", must be a number"); } else { params.data.number = valueAsNumber; } } 

Vous pouvez utiliser la directive ng-table pour animer vos tables. Il supporte le sorting, le filtrage et la pagination. Les lignes d’en-tête avec titres et filtres sont générées automatiquement lors de la compilation.

 For example 

démo modifiable

Vous pouvez faire votre propre en utilisant la richesse de Angular. Vous n’avez peut-être pas besoin de chercher des plug-ins tiers.

J’ai fait un échantillon de base qui supporte: –

  1. Édition en ligne des données liées.
  2. Ajouter une nouvelle ligne en appuyant sur la dernière cellule de grid.

https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview

Appliquer un simple css

 .TextBoxAsLabel { border: none; background-color: #fff; background: transparent; width:100%; } //for Dropdown .selectable::-ms-expand { display: none; } .selectable{ -webkit-appearance: none; appearance: none; } 

J’espère que cela fonctionne, sachez s’il y a des problèmes.

Les grids angulars open source les plus récentes que je puisse voir sont ux-angularjs-datagrid, je ne l’ai pas essayé mais les démos semblent prometteuses …

https://github.com/webux/ux-angularjs-datagrid