сложные элементы управления угловым деревом - PullRequest
0 голосов
/ 25 апреля 2018

Я использую angular-tree-control для реализации дерева.

В html-шаблоне каждого элемента дерева много ng-if для проверки, нужно ли показывать значки и прочее. Также каждый элемент содержит директиву для создания контекстного меню.

Так что, если у меня много предметов (> 1000), дерево замедляется, поэтому я задаюсь вопросом, что было бы лучшим способом реализовать его?

1 Ответ

0 голосов
/ 01 мая 2018

Как @Spangen sugests, ваш вопрос нуждается в дополнительной информации ...

Если вы пытаетесь визуализировать более 1000 узлов за один раз, вам, вероятно, потребуется построить специализированное решение (например, в директиве Angular) ... Я не знаю ни одного общего решения AngularJS, которое будет поддерживать.

Если вы не начинаете с того, что развернуто так много узлов, но вместо этого возникает проблема, когда вы расширяете узлы и этоесли вы превысите 1000 узлов, то, возможно, https://plnkr.co/edit/RxKuOD62Wy6PblmgzFIx будет для вас интересным ...

Он будет достаточно быстрым даже после 10000 узлов в моей текущей машине, хотя, безусловно, замедляетсятак как объем памяти увеличивается ... Так как мы не знаем сложности ваших узлов, у нее просто есть 10 нг-иф, которые реагируют на текущий уровень дерева ...

Шаблон:

  <ul dx-start-with="app.root" class="list-unstyled">
    <li ng-repeat="node in $dxPrior.nodes">
      <i class="glyphicon btn btn-primary" ng-class="node.expanded ? 'glyphicon-chevron-down':'glyphicon-chevron-right'" ng-click="app.toggle(node)"></i> {{ node.name }}

      > This is node <span ng-bind="$index"></span>
      at level <span ng-bind="$dxLevel"></span> 
      under <span ng-bind="$parent.$parent.$dxLevel"></span>

      <div ng-if="$dxLevel === 0" >ZERO</div>
      <div ng-if="$dxLevel === 1" >ONE</div>
      <div ng-if="$dxLevel === 2" >TWO</div>
      <div ng-if="$dxLevel === 3" >THREE</div>
      <div ng-if="$dxLevel === 4" >FOUR</div>
      <div ng-if="$dxLevel === 5" >FIVE</div>
      <div ng-if="$dxLevel === 6" >SIX</div>
      <div ng-if="$dxLevel === 7" >SEVEN</div>
      <div ng-if="$dxLevel === 8" >EIGHT</div>
      <div ng-if="$dxLevel === 9" >NINE</div>

      <ul ng-if="node.expanded" dx-connect="node" style="list-style-type: square"></ul>
    </li>
  </ul>

(Обратите внимание: если вы используете более новую версию AngularJS, то рекурсивные директивы также являются претендентом, я бы предположил, что они могли бы предложить немного больше производительности, но я не могускажем сколько, выше было чем-то, что я мог быстро сделать на старом образце, который у меня уже лежал)


Но если вы пытаетесь визуализировать более 1000 узлов за один раз, это даже немного останавливаетнемного, но я должен был бы спросить, зачем вам это делать? ... Как пользователь, это то, что я не хочу видеть? ... это звучит как способ получить много информации, чтобы предоставить пользователю все сразув виде дерева ...

(Если бы это были точки на карте или что-то еще в графическом виде, то я вижу, что имеет смысл отображать это количество информации, но не в дереве) ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...