Лучшая с открытым исходным кодом сетка с плавной бесконечной прокруткой

Question

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

Вот почему мы думали, что разбитый стол никогда не будет работать, и, честно говоря, я считаю, что разбиение на страницы - глупо. Отображение динамически изменяющихся данных в таблице с разбивкой по страницам является хромым. Произнесите элемент на странице # 2, где следующее обновление данных может приземляться на странице.

Итак, нам нужно было построить сетку с красивым бесконечным прокруткой. Не поймите меня неправильно, я пробовал много разных решений. Во-первых, я построил ваниль ng-repeat и попытался использовать ng-infinite-scroll, а затем ng-scroll from UI.Utils. Это быстро доводит меня до такой степени, что прокрутка стала мучительно медленной, и я даже не использовал никаких сумасшедших вещей, таких как сложные шаблоны клеток, ng-if или фильтры. Очень скоро производительность стала моей самой большой болью. Когда я начал добавлять такие вещи, как изменяемые размеры столбцов и настраиваемые шаблоны ячеек, браузер больше не сможет обрабатывать все эти привязки.

Тогда я попробовал ng-grid, и сначала мне понравилось - он прост в использовании, у него есть несколько приятных функций, которые мне нужны, но вскоре я понял - ng-grid ужасен. Текущая версия, заполненная ошибками, все участники перестали исправлять их и переключились на работу над следующей версией. И только Бог знает, когда это будет готово к использованию. ng-сетка оказалась намного хуже, чем даже ванильный ng-repeat.

Я все время пытался найти что-то лучшее. trNgGrid выглядел неплохо, но слишком упрощен и не предлагает функции, которые я искал из коробки.

ng-table не сильно отличался от ng-grid, вероятно, это вызвало бы у меня такие же проблемы с производительностью.

И, конечно, мне нужно было найти способ оптимизации привязок. Пробовал bind-once - не был удовлетворен, сетка была все еще лагги. (upd: angular 1.3 предлагает {{::foo}} синтаксис для одноразовой переплета)

Затем я попробовал React. Первоначальный эксперимент выглядел многообещающим, но для того, чтобы построить что-то более сложное, мне нужно изучить особенности Реакт, кроме того, что вещь чувствует себя неангулярной, и знает, как тестировать директивы, созданные с угловыми + реагировать. Все мои усилия по созданию хорошего автоматизированного тестирования не удалось - я не мог найти способ сделать React и PhanthomJS похожими друг на друга (что, вероятно, более проблематично для Phantom), есть лучший браузер без головы) Также React не решает "добавления to DOM "- когда вы вставляете новые элементы в массив данных, за несколько миллисекунд браузер блокирует поток пользовательского интерфейса. Это, конечно, совершенно другой тип проблемы.

Мой коллега (кто работает на стороне сервера), увидев мою борьбу, ворчал мне, что я уже потратил слишком много, пытаясь решить проблемы с производительностью. Он заставил меня попробовать SlickGrid, рассказывая мне истории, как это лучший виджет сетки. Я честно попробовал, и быстро захотел сжечь свой компьютер. Эта вещь полностью зависит от jQuery и кучи jQueryUI-плагинов, и я отказываюсь внезапно перейти к средневековым временам веб-разработки и потерять всякую угловатую доброту. Нет, спасибо.

Затем я пришел ux-angularjs-datagrid, и мне действительно понравилось. Он использует какой-то умный алгоритм bad-ass, чтобы держать вещи очень отзывчивыми. Проект молодой, но выглядит очень многообещающим. Я смог построить некоторую базовую сетку с большим количеством строк (я имею в виду огромное количество строк), не слишком сильно отклоняясь от пути углового дзэн и прокручивая все еще гладко.К сожалению, это не полное решение для виджета сетки - у вас не будет изменений размеров столбцов и других вещей, документации несколько не хватает и т. Д.

Также я нашел это article и имел смешанные чувства об этом, эти ребята применили несколько не документированных хаков к угловым и, скорее всего, сломались с функциональными версиями угловых.

Конечно, есть, по крайней мере, пара платных опций, таких как Wijmo и интерфейс Kendo. Они совместимы с угловыми, однако приведенные примеры представляют собой довольно простые таблицы с разбивкой по страницам, и я не уверен, стоит ли их даже пытаться. Я мог бы иметь те же проблемы с производительностью. Также вы не можете выборочно оплачивать только виджет сетки, вам нужно купить весь набор - полный дерьма, который я, вероятно, никогда не использую.

Итак, наконец, на мой вопрос - есть ли хороший, гарантированный, менее болезненный способ иметь приятную сетку с бесконечной прокруткой? Может ли кто-нибудь указать на хорошие примеры, проекты или веб-страницы? Можно ли использовать ux-angularjs-datagrid или лучше построить свою собственную вещь, используя углы и реагировать? Кто-нибудь когда-либо пробовал сети Кендо или Wijmo?

Пожалуйста, примите во внимание! Не голосуйте за закрытие этого вопроса, я знаю, что есть много похожих вопросов по stackoverflow, и я читаю почти каждый из них, но вопрос остается открытым.

Answer 1

Возможно, проблема связана не с существующими виджетами, а с тем, как вы ее используете. Вы должны понимать, что более 2000 привязок угловых циклов дайджеста могут занять слишком много времени, чтобы пользовательский интерфейс отображался плавно. В той же идее, чем больше узлов html у вас есть на вашей странице, тем больше памяти вы будете использовать, и вы можете достичь способности браузера сделать так много узлов плавным способом. Это одна из причин, почему люди используют эту «хромую» разбивку на страницы.

В конце концов, что вам нужно для достижения чего-то «плавного», это ограничить количество отображаемых данных на странице. Чтобы сделать его прозрачным, вы можете выполнять разбиение на страницы на прокрутку.

This plunker показывает вам эту идею, с smart-table. При прокрутке вниз загружается следующая страница (при прокрутке вам придется выполнять предыдущую страницу). И в любое время максимальное количество строк 40.

function getData(tableState) { 

      //here you could create a query string from tableState 
      //fake ajax call 
      $scope.isLoading = true; 

      $timeout(function() { 

       //if we reset (like after a search or an order) 
       if (tableState.pagination.start === 0) { 
        $scope.rowCollection = getAPage(); 
       } else { 
        //we load more 
        $scope.rowCollection = $scope.rowCollection.concat(getAPage()); 

        //remove first nodes if needed 
        if (lastStart < tableState.pagination.start && $scope.rowCollection.length > maxNodes) { 
         //remove the first nodes 
         $scope.rowCollection.splice(0, 20); 
        } 
       } 

       lastStart = tableState.pagination.start; 

       $scope.isLoading = false; 
      }, 1000); 

     } 

Эта функция вызывается всякий раз, когда пользователь прокрутки вниз и достигают порогового значения (с дросселем, конечно, по причине производительности)

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

Answer 2

Хотелось бы обратить ваше внимание на Angular Grid. У меня были те же проблемы, что и вы, поэтому я написал (и разделил) свой собственный виджет сетки. Он может обрабатывать очень большие наборы данных и имеет отличную прокрутку.