Table triable avec knockout.js et jqueryUI

Question

J'essaie de créer une table triable en utilisant knockout.js et jqueryUI, mais je ne sais pas si j'utilise une mauvaise approche. J'utilise la structure JSON suivante pour mes données:

{ 
       "columns":[ 
        "Header 1", 
        "Header 2", 
        "Header 3" 
       ], 
       "rows":[ 
        { 
        "Values":[ 
         "Col1Item0", 
         "Col2Item0", 
         "Col3Item0" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item1", 
         "Col2Item1", 
         "Col3Item1" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item2", 
         "Col2Item2", 
         "Col3Item2" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item3", 
         "Col2Item3", 
         "Col3Item3" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item4", 
         "Col2Item4", 
         "Col3Item4" 
        ] 
        }, 
        { 
        "Values":[ 
         "Col1Item5", 
         "Col2Item5", 
         "Col3Item5" 
        ] 
        } 
       ] 
      } 

Je n'ai aucun problème contraignant ce à la table et l'afficher. Je peux activer le triable en utilisant l'événement jqueryUI triable, mais quand il est temps de collecter les résultats, je suis bloqué. J'ai trouvé quelques ressources sur la façon de trier la liste mais rien sur le tri de la table. Le résultat attendu du tri serait une structure JSON réorganisée que je fournirais avec l'ordre de tri correct.

J'ai essayé d'utiliser ko.toJSON (this) pour enregistrer le résultat dans le champ masqué de la page mais en recevant une exception. Y a-t-il quelque chose qui me manque? J'ai créé un projet violon, au cas où quelqu'un veut jeter un oeil: http://jsfiddle.net/Nikita1984/bFSbR/

Answer 1

J'ai une liaison triable ici: github.com/rniemeyer/knockout-sortable. Il vous permet de remplacer foreach: myData par sortable: myData et conserve votre mise à jour avec la commande en cours dans l'interface utilisateur.

Vous pouvez également passer des options dans comme:

<tbody data-bind="sortable: { data: rows, options: { handle: '.sortableHandle', cursor: 'move' } }"> 

Ou configurer par défaut global comme:

ko.bindingHandlers.sortable.options.handle = ".sortableHandle"; 

Voici votre échantillon mis à jour pour l'utiliser: http://jsfiddle.net/rniemeyer/fC2DT/

Answer 2

Avez-vous envisagé d'utiliser à la place KoGrid?

Answer 3

J'ai couru dans cela avant, m'a pris beaucoup de temps pour comprendre. Fondamentalement, ce qui se passe, c'est que vous liez le tri à une table vide. Vous devez créer un gestionnaire de liaison personnalisé pour ajouter le tri, ou vous pouvez ajouter la liaison de tri après avoir généré la table avec KO.