web-dev-qa-db-fra.com

DataGrid éditable dans AngularJS

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

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

javascriptangularjskendo-ui
50
Sutikshan Dubey

vérifier i-grid

création de modèles, virtualisation, liaison de données simple pour les sélections, le regroupement, etc.

45
timothyswt

regardez cet exemple assez générique, où je boucle d’abord par rangées puis par colonnes. puis un simple changement entre un span et un champ de saisie. http://jsfiddle.net/3BVMm/3/

cela vous permettrait de faire de l'édition en ligne avec quelques lignes de code.

MAIS: cela ne fonctionne pas comme prévu, car il semble y avoir un bug, que j'ai déjà posté sur angular.

10
Luke

Vous pouvez également utiliser Smart Table.

Exemple, double-cliquez sur un élément de la colonne de bilan: 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 Cellule d'édition section. Le mode d'édition de cellule est entré avec un double clic.

Github: lorenzofox3/Smart-Table

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

9
Răzvan Flavius Panda

Vous pouvez également essayer angular-xeditable.
Pour les tableaux, il a:

6
vitalets

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

4
Saber

La grille Angular Grid est capable de faire de l'édition en ligne. Il s’agit d’une directive AngularJS, elle doit donc être connectée à votre Angular). Elle est également fournie avec d’autres fonctionnalités de grille standard (sélection, filtrage, etc.).

La page de documentation pour l'édition est ici

Pour ce faire, définissez editable sur true dans la définition de colonne, par exemple:

colDef.editable = true;

Par défaut, la grille est gérée comme une valeur de chaîne. Si vous souhaitez effectuer un traitement personnalisé de la cellule, par exemple pour le convertir en un entier ou pour effectuer une validation, vous fournissez un newValueHandler dans 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;
    }
}
4
Ceolter

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

For example

démo éditable

3
Prabin Tp

Vous pouvez créer votre propre richesse en utilisant Angular. Peut-être que vous n'avez pas besoin de chercher des plugins tiers.

J'ai fait un échantillon de base qui prend en charge: -

  1. Inline Edition de données liées.
  2. Ajouter une nouvelle ligne lors de la frappe de la dernière cellule de grille.

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

espérons que cela fonctionne, je sais si des problèmes.

2
user5767237

Le plus récent open source angular que je peux voir est ux-angularjs-datagrid, je ne l’ai pas essayé, mais les démos semblent prometteuses ...

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

1
Srivathsa Harish Venkataramana