it-swarm.com.ru

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

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

Как я могу сделать что-то похожее на это: http://jsfiddle.net/tzYbU/1162/ Используя Angular Directive?

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

<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>
27
Sushrut

Я это сделал. Смотрите мой код ниже.

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']);
48
Sushrut

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

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

Вы получаете хорошую поддержку касания дополнительно.

11
Thomas

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

Смотрите это вопрос и это запись в Википедии.

Для манипуляций с 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() с измененным правилом и его новой позицией в модели.

5
johnnynotsolucky

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

1
ionat

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

Пожалуйста, смотрите эту ссылку для примеров 

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

Пожалуйста, посмотрите это для github 

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

1
Ramesh Papaganti

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

Требования

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

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

Загрузите файл скрипта: 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>

Разработка заметок:

  1. требуется ng-модель, чтобы директива знала, какую модель обновлять. 
  2. пользовательский элемент должен содержать только один ng-повтор 
  3. Фильтры, которые манипулируют моделью (например, filter, orderBy, limitTo, ...), должны применяться в контроллере вместо ng-repeat

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

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

0
Null Pointer