Ведение порядка вставки в отсортированную таблицу - PullRequest
Новая
       21

Ведение порядка вставки в отсортированную таблицу

1 голос
/ 18 апреля 2020

У меня есть таблица, которая позволяет мне вставить новую строку выше или ниже другой строки. Таблица может быть отсортирована по столбцу.

Проблема в том, что новые строки с пустыми полями, которые добавляются в мою отсортированную таблицу, всегда будут отображаться в верхней части таблицы.

Это HTML: 

<table>
    <th ng-repeat= "header in headers">
        <a href="#" ng-click="orderByField='name'; reverseSort = !reverseSort"> Name </a>
    </th>
    <tr ng-repeat "result in results | orderBy:orderByField:reverseSort">
        <td> 
          <span>{{result}}</span>
          <md-icon ng-click="addRow(result, true)"></md-icon>
          <md-icon ng-click="addRow(result, false)"></md-icon>
        </td>
    </tr>
</table>

Это мой контроллер: 

function addRow(selectedRow, isAbove) {
  var selectedPos = $scope.results.indexOf(selectedRow);
  var newRow = "";

  if (isAbove) {
    $scope.results.splice(selectedPos, 0, newRow);
  } else {
    $scope.results.splice(selectedPos + 1, 0, newRow);
  }
}

Итак, если моя таблица выглядит следующим образом, после сортировки: 

[Before sort]       [After sort]

Name                Name
----                ----
D                   A
----                ----
C                   B
----                ----
B                   C
----                ----
A                   D
----                ----

и я вставляю новая строка выше и ниже D , моя таблица теперь выглядит так: 

Name 
-----
""
-----
""
-----
A
-----
B
-----
C
-----
D
-----

Ожидаемый результат: 

Name
----
A
----
B
----
C
----
""
----
D
----
""
----

Почему новые строки не t появляется прямо над или под строкой, из которой я выбрал добавление?

1 Ответ

0 голосов
/ 19 апреля 2020

Вот довольно простая директива c, которая соответствует минимуму, указанному вами в комментариях. Он только упорядочивает данные один раз при первой загрузке и не очень реактивен, но позволяет переключаться и добавлять часы должно быть довольно просто, например, c. для дополнительных функций. 

var app = angular.module('myApp',[]);
app.controller('ctrlMain', function($scope, filterFilter){
  $scope.reverse = false;  // <-- `reverse` boolean
  // Data
  $scope.results = [
    { name: "b" },
    { name: "g" },
    { name: "x" },
    { name: "a" },
    { name: "p" },
  ];
});
app.directive('orderer', function($filter) {
  return {
    scope: {
      data: '=orderer',
      reverse: '='
    },
    link: function(scope,element,attrs){
      scope.ordered = $filter('orderBy')(scope.data, 'name', scope.reverse);
      scope.formatted = [];
      
      scope.addRow = function(i, isAbove) {
        let index = i + !isAbove
        if (scope.reverse) {
          index = scope.ordered.length - index;
        }
        scope.ordered.splice(index, 0, { name: '*' });
      }
      scope.setFormatted = function(isReversed) {
      	scope.formatted = scope.reverse ? scope.ordered.slice().reverse() : scope.ordered;
      };
      scope.$watch('reverse', function(n, o){
        scope.setFormatted();
      });
      scope.$watch('ordered', function(n, o){
        scope.setFormatted();
      }, true);
    },
    template: `
      <tr ng-repeat="item in formatted">
        <td>{{ item.name }}</td>
        <td><button ng-click="addRow($index, true)">O</button</td>
        <td><button ng-click="addRow($index, false)">U</button</td>
      </tr>
    `
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="ctrlMain">
    <button ng-click="reverse = !reverse">toggle</button>
    <table>
      <tr><th>Header</th></tr>
      <tbody orderer="results" reverse="reverse"></tbody>
    </table>
  </div>
</body>
...