Сортировка или перестановка строк таблицы в angularjs (перетаскивание)

24

Я хотел иметь функциональность переупорядочения строк в таблице (сортировка строк с помощью перетаскивания). И индекс модели строки также должен измениться в модели.

Как я могу сделать что-то похожее на это: http://jsfiddle.net/tzYbU/1162/ с помощью директивы Angular?

Я создаю таблицу как:

<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>
Теги:
html-table
angularjs-directive

6 ответов

48
Лучший ответ

Я сделал это, вот скрипка: Сортируемые строки таблицы

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>

Директива (JS)

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

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

angular.bootstrap(document, ['myapp']);
Поделиться
  • 0
    Помещение ng: model в ui: sortable, по-видимому, является ключом к поддержанию индекса в модели в синхронизации с порядком сортировки DOM. Спасибо!
  • 11
    Любая идея, как справиться с этим без jQuery с чистым Angular.js?
Показать ещё 5 комментариев
10

Существует еще одна библиотека: RubaXa/Sortable: https://github.com/RubaXa/Sortable

Это для современных браузеров и без зависимости jQuery. Включена директива angular. Я собираюсь проверить это сейчас.

Кроме того, вы получаете хорошую поддержку касания.

Поделиться
  • 1
    Не похоже, что это поддерживает таблицы.
  • 3
    Кажется, работает на меня. Обязательно поместите директиву в элемент TBODY > jsbin.com/gebirenoje/1/edit?html,js,output
Показать ещё 1 комментарий
4

AngularJS не был создан для манипулирования элементами DOM, а не для расширения HTML-страницы.

См. этот вопрос и this Википедия.

Для манипуляций с DOM jQuery/mootools/etc будет вам просто отлично (подсказка: пример в вашей ссылке jsFiddle).

Возможно, вы можете использовать AngularJS для отслеживания упорядочения ваших элементов для обновления вашей модели. Я не уверен, как это сделать с помощью директив, но следующий код может быть полезен

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
}

Затем, когда вы переупорядочиваете список, просто вызовите updateRules() с измененным правилом и его новой позицией в модели.

Поделиться
  • 1
    да, я согласен, это должно быть сделано с помощью некоторого DOM-манипулятора, такого как jQuery, но я хочу, чтобы такая же функция jQuery была внутри угловой директивы.
  • 1
    К сожалению, мои знания AngularJS очень минимальны, однако на этой странице есть некоторый код, который сочетает AngularJS с jQuery datepicker. Есть рабочий пример тоже. Я уверен, что с некоторыми изменениями можно было бы комбинировать вместо этого виджет jQuery Sortable.
Показать ещё 1 комментарий
3

Любой, кто хочет чего-то подобного, но не понимает принятого ответа. Ниже приведена директива UI.Sortable для AngularJS, которая позволяет сортировать строки массива/таблицы с перетаскиванием.

Требования

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

Использование

Загрузите файл script: sortable.js в ваше приложение: (вы можете найти этот sortable.js из здесь

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

убедитесь, что вы включили файлы JQuery, AngularJs и JQueryUI js в перед этим сортируемым файлом Добавьте отсортированный модуль в зависимости от вашего прикладного модуля:

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

Применить директиву к элементам формы:

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

Разработка примечаний:

  • ng-model требуется, так что директива знает, какая модель обновляется. Элемент
  • ui-sortable должен содержать только один ng-repeat
  • Фильтры, которые управляют моделью (например, filter, orderBy, limitTo,...), должны применяться в контроллере вместо ng-repeat

3-я точка очень важна, так как потребовалось почти час, чтобы понять почему моя сортировка не работала? Это было из-за orderBy в html и это снова сбросило сортировку.

Для лучшего понимания вы можете проверить подробности здесь.

Поделиться
  • 1
    любить ответ потрясающе
1

Если я правильно вас понимаю, вы хотите отсортировать строки? Если это так, используйте UI-Sortable: GitHub Демо: codepen.io/thgreasi/pen/jlkhr

Поделиться
  • 1
    Работает ли UI-Sortable со строками таблиц? Или только элементы списка?
  • 0
    Я использовал с Table Rows. Работает нормально. Вы можете использовать это.
0

Наряду с RubaXa/Sortable есть еще одна библиотека angularjs avilable, которая angular -ui-tree. Наряду с перетаскиванием мы можем упорядочить элементы в древовидной структуре, и мы можем добавлять и удалять элементы (узлы)

См. эту ссылку для примеров

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

См. это для github

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню