web-dev-qa-db-fra.com

Trier ou réorganiser les lignes d'une table en angularjs (glisser-déposer)

Je voulais avoir la possibilité de réorganiser les lignes dans un tableau (trier les lignes par glisser-déposer). Et l’index de la disposition des lignes devrait également changer dans le modèle.

Comment puis-je faire quelque chose de similaire à ceci: http://jsfiddle.net/tzYbU/1162/ En utilisant la Directive angulaire?

Je génère la table en tant que:

<table id="sort" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header-color-green"></th>
      <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
    </tr>
  </thead>
  <tbody ng-repeat="rule in Rules.data">
    <tr>
      <td class="center"><span>{{rule.ruleSeq}}</span></td>
      <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
    </tr>
  </tbody>
</table>
javascriptangularjsangularjs-directivehtml-table
27
Sushrut

Je l'ai fait. Voir mon code ci-dessous.

HTML

<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <thead>
            <tr>
                <th>Index</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">
                <td>{{$index}}</td>
                <td>{{item}}</td>
            </tr>
        </tbody>{{list}}
        <hr>
</div>

Directive (JS)

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

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "thre", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);
48
Sushrut

Il existe une autre bibliothèque: RubaXa/Sortable: https://github.com/RubaXa/Sortable

C'est pour les navigateurs modernes et sans dépendance jQuery. Inclus est une directive angulaire. Je vais vérifier maintenant.

Vous obtenez également un bon support tactile.

11
Thomas

AngularJS n'était pas vraiment construit pour la manipulation d'éléments DOM, mais plutôt pour extend le code HTML d'une page.

Voir cette question et this entrée Wikipedia.

Pour la manipulation du DOM, jQuery/mootools/etc vous convient parfaitement (astuce: l'exemple de votre lien jsFiddle).

Vous pourriez probablement utiliser AngularJS pour suivre l'ordre de vos éléments afin de mettre à jour votre modèle. Je ne suis pas sûr de savoir comment faire cela en utilisant des directives, mais le code suivant peut être utile

var MyController = function($scope, $http) {
    $scope.rules = [...];
    ...

}

var updateRules = function(rule, position) {
    //We need the scope
    var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController'

    //Update scope.rules
}

Ensuite, lorsque vous réorganisez la liste, appelez simplement updateRules() avec la règle modifiée et sa nouvelle position dans le modèle.

5
johnnynotsolucky

Si je vous ai bien compris, vous voulez pouvoir trier les lignes? Si c'est le cas, utilisez UI-Sortable: GitHub Demo: codepen.io/thgreasi/pen/jlkhr

1
ionat

En plus de RubaXa/Sortable, il existe une autre bibliothèque disponible: angular-ui-tree. En plus du glisser-déposer, nous pouvons organiser les éléments dans une arborescence et ajouter et supprimer des éléments (nœuds).

S'il vous plaît voir le lien pour des exemples 

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example .

S'il vous plaît voir ceci pour github 

https://github.com/angular-ui-tree/angular-ui-tree .

1
Ramesh Papaganti

Toute autre personne qui veut quelque chose comme ça mais qui ne comprend pas la réponse acceptée. Voici une directive UI.Sortable pour AngularJS qui vous permet de trier un rang/un tableau par glisser-déposer.

Exigences

JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+

_ {Usage} _

Chargez le fichier script: sortable.js dans votre application: (vous pouvez trouver ce sortable.js de ici

<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>

assurez-vous que vous avez inclus les fichiers JQuery, AngularJs et JQueryUI js dans commander avant ce fichier triable Ajoutez le module triable en tant que dépendance à votre module d'application:

 var myAppModule = angular.module('MyApp', ['ui.sortable'])

Appliquez la directive à vos éléments de formulaire:

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

Notes de développement:

  1. ng-model est requis pour que la directive sache quel modèle mettre à jour. 
  2. l'élément triable ui ne doit contenir qu'un seul ng-repeat 
  3. Les filtres manipulant le modèle (tels que filter, orderBy, limitTo, ...) doivent être appliqués dans le contrôleur au lieu de ng-repeat

Le 3ème point est très important car il a fallu presque une heure pour comprendre pourquoi mon tri ne fonctionnait pas? C'était à cause de orderBy en html et c'était remettre le tri à nouveau.

Pour plus de compréhension, vous pouvez vérifier les détails ici .

0
Null Pointer