Лучший способ представить таблицу или таблицу в AngularJS с Bootstrap 3? [закрыто]

284

Я создаю приложение с AngularJS и Bootstrap 3. Я хочу показать таблицу / сетку с тысячами строк. Каков наилучший доступный элемент управления для AngularJS & Bootstrap с такими функциями, как сортировка, поиск, разбиение на страницы и т. Д.

Рахат Ханна
источник
6
Вы должны определенно взглянуть на нг-сетки здесь: angular-ui.github.io/ng-grid
Мейнгай
1
Почему бы не использовать UI Bootstrap? Он недавно был обновлен для использования Bootstrap 3: angular-ui.github.io/bootstrap
CallumVass
3
Эти тысячи строк не все должны быть отправлены клиенту. Поэтому решение на чистом JavaScript не будет таким хорошим. Сервер должен будет выполнить разбиение на страницы и / или поиск для вас.
флоп
В следующий раз попробуйте сделать снимок для таблицы ngTasty. Zizzamia.com/ng-tasty/directive/table основан на загрузке таблицы css :)
zizzamia
3
Angular переходит в « UI-Grid », в которой будут встроены элементы таблицы. хорошая альтернатива «jquery datatables»
diaryfolio

Ответы:

223

Попробовав ngGrid, ngTable, trNgGrid и Smart Table , я пришел к выводу, что Smart Table , безусловно, является лучшей реализацией AngularJS и Bootstrap. Он построен точно так же, как если бы вы строили свой собственный наивный стол, используя стандартные угловые. Вдобавок ко всему, они добавили несколько директив, которые помогут вам выполнять сортировку, фильтрацию и т. Д. Их подход также позволяет довольно просто расширять себя. Тот факт, что они используют обычные теги html для таблиц и стандартное ng-repeat для строк и стандартный загрузчик для форматирования, делает меня очевидным победителем.

Их код JS зависит от угла, и ваш HTML может зависеть от начальной загрузки, если хотите. Всего JS-код составляет 4 КБ, и вы даже можете легко выбрать что-то оттуда, если хотите достичь еще меньшей площади.

В то время как другие сетки будут вызывать у вас клаустрофобию в разных областях, Smart Table чувствует себя открытым и точно.

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

Не пропустите Smart Table !!!

Я не имею никакого отношения к Smart Table, кроме как использовать его сам.

Рикки Хелгессон
источник
12
Просто нашел небольшую ошибку в Smart Table, сообщил о ней, и она была исправлена ​​в течение нескольких часов. Я поражен тем, что не все используют Smart Table - он намного лучше всех остальных.
Рикки Хелгессон
1
Smart Table - определенно лучший выбор для AngularJS. В ngGrid есть больше возможностей, но их легко добавить, расширив Smart Table.
Toilal
1
Выпущена ng-grid 3.0.7, и она хорошо сработала для меня (теперь она называется ui-grid)
Кимбалл Робинсон
1
Проблема в том, что нумерация страниц на умном столе действительно ужасна, нет первой страницы, нет последней страницы, нумерация таблиц ng действительно более эргономична. То же самое для сортировки: на смарт-столе мы просто не знаем, что мы можем отсортировать до щелчка, это совсем не эргономично ...
amdev
1
Smart Table для тривиальных сценариев только для чтения, UI-Grid для всего остального или просто UI-Grid :)
RandomUs1r
116

У меня было такое же требование, и я решил его с помощью этих компонентов:

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

Вот скриншот из текущего проекта, чтобы дать вам представление о том, как он выглядит:

введите описание изображения здесь

[ОБНОВЛЕНИЕ Июль 2017]

После нескольких лет эксплуатации ng-grid я могу сказать, что с этим компонентом нет серьезных проблем. Да, много мелких ошибок, но не показывать пробки (по крайней мере, в моих случаях использования). Сказав это, я настоятельно рекомендую не использовать этот компонент, если вы начинаете проект с нуля. Этот компонент представляет собой вариант хорош только если вы обязаны AngularJS 1.0.x . Если вы можете выбрать версию Angular, перейдите на новый компонент. Список компонентов таблицы для Angular 4 был составлен Сэмом Дирингом в этом блоге .

Ларс Бенке
источник
2
Wijmo также предоставляет Angular Directive вместе с такими функциями, как группировка, сортировка и т. Д. Вы также можете проверить образец Benchmark для ngGrid и Wijmo Grid с AngularJS: demos.componentone.com/wijmo/Angular/GridBenchmark/…
Ashish
@Lars Behnke Как применить стиль таблицы Bootstrap к ng-grid? Насколько я видел, ng-grid не использует табличные теги tr, на которые рассчитывает Bootstrap css.
elpddev
Реализация компонента ng-grid не основана на Bootstrap. Поэтому я настроил ng-grid.less, чтобы внешний вид был как можно ближе к элементам графического интерфейса начальной загрузки.
Ларс Бенке
1
Проект ng-grid переписан как UI Grid, который доступен на ui-grid.info
Мостар
2
Статистика 2016 года показывает, что плагин ng-таблиц все еще востребован: GitHub: A. ng-grid: ~ 3500 коммитов, ~ 800 выпусков. Б. Смарт-таблица: ~ 300 коммитов, ~ 40 выпусков. C. ng-table: ~ 500 коммитов, ~ 200 выпусков. Тенденции Google просто подтверждают ту же идею, сравнивая: «угловой умный стол», «угловая сетка пользовательского интерфейса», «угловая таблица нг». google.com/trends/…
Антон Лыхин
87

При «тысячах строк» ​​лучше всего было бы делать пейджинг на стороне сервера. Когда я некоторое время назад изучал различные параметры таблицы / сетки AngularJ, у меня было три явных фаворита:

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

ng-grid , вероятно, является самым известным из-за его связи с angular-ui, но я лично предпочитаю ng-table , мне очень нравится их реализация и то, как вы ее используете, и у них есть отличная документация и примеры, доступные и активно улучшающиеся.

Бейерс
источник
7
Я был рад видеть, что кто-то упоминает нг-стол. Я тоже предпочитаю ng-table, а не ng-grid, так как у него более качественный стиль, особенно в режиме редактирования.
Роб J
2
Прыжки на подножку ngTable здесь. Я пошел с ng-grid для проекта, и это было довольно ужасно. Я использовал ng-grid исключительно из-за его связи с angular-ui, и он, кажется, немного активнее на github. Я думаю, что я собираюсь переключиться на ngTable. Надеюсь, это не будет слишком сложно.
Бретт
10
Эй, новичок с угловой экосистемой, я изначально пытался использовать ng-grid из-за «лучшего» веб-сайта, но быстро столкнулся с проблемами стиля из-за их глубоко вложенной структуры div. Пока что мне больше нравится ng-таблица, потому что она на самом деле использует table. Я могу просто применить класс начальной загрузки таблицы, и это работает ...
Пьер Генри
1
Обратите внимание, что код и подход smart-таблицы радикально изменились с его версией v1.0.0 (август 2014), поэтому комментарии, сделанные до этой даты, больше не актуальны
Лоран
4
ng-таблица в основном неактивна, поскольку поддерживается одним человеком на Украине, и там было много других проблем. ng-grid переписывается как ui-grid для версии 3.0, но он не готов к работе. Поэтому сейчас, как правило, не время выбирать или переключать реализации таблиц Angular. Smart-Table также поддерживается более или менее одним человеком. В настоящее время мы используем ng-table, но мы планируем перейти на ui-grid по мере его развития.
Сплактар
77

Это многофункциональная угловая сетка:

trNgGrid

Некоторые из его особенностей:

  • Был построен с простотой в виду.
  • Использует простые таблицы HTML, позволяя браузерам оптимизировать рендеринг.
  • Полностью декларативный, сохраняющий разделение интересов, что позволяет вам полностью описать его в HTML, не портя контроллеров.
  • Полностью настраивается с помощью шаблонов и двусторонних атрибутов, связанных с данными.
  • Легко поддерживать, имея код, написанный на TypeScript.
  • Имеет очень короткий список зависимостей: AngularJs и Bootstrap CSS, с дополнительными темами Bootswatch.

trNgGrid

Наслаждаться. Да, я автор. Мне надоели все угловые сетки там.

MoonStom
источник
5
Это нужно еще немного признания. Я начал с ngGrid. Я не мог понять, какую версию я должен был использовать, так как, по-моему, я начал искать между их переходами с 2.x на 3.x, и при этом я даже не смог заставить таблицу работать. Затем я перешел на ngTableкакую работу. Я не мог заставить сортировку или пейджинг работать правильно, но это из-за способа загрузки данных $http. Потом я увидел это trNgGridи святое дерьмо ... так легко встать и бежать. Хотелось бы мне написать больше здесь, но я предлагаю всем сначала попробовать!
Ронни
2
Я полностью согласен с @Ronnie. Это должно быть уделено больше внимания. После целого дня «борьбы» с ng-grid / ui-grid, чтобы сделать что-то более сложное, я попробовал trNgGrid и работал с первой попытки.
Джонни Эверсон
4
выглядит хорошо, но не может найти важные элементы, такие как фиксированный заголовок, изменяемые размеры столбцов, перетаскиваемые столбцы и т. д.
iLemming
является ли начальная загрузка жесткой зависимостью? Я хотел бы, чтобы моя сетка использовала пользовательские CSS. возможно?
Джасдип Сингх
Это требует большего признания. Я был так близок к работе с ng-grid, что понял, что он даже не использует таблицы html.
Райанвинчестер
39

Для тех, кто читает этот пост: сделайте себе одолжение и держитесь подальше от ng-grid. Он полон ошибок (на самом деле ... почти каждая часть библиотеки каким-то образом повреждена), разработчики отказались от поддержки ветки 2.0.x, чтобы работать в 3.0, которая очень далека от готовности. Устранить проблемы самостоятельно - непростая задача, код ng-grid не мал и не прост, если у вас нет много времени и глубоких знаний angular и js в целом, это будет трудной задачей.

Итог: полон ошибок, а последняя стабильная версия была заброшена.

Github полон PR, но они игнорируются. И если вы сообщаете об ошибке в ветке 2.x, она закрывается.

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

agusluc
источник
Можете ли вы рассказать нам пару примеров этих ошибок / сценариев, которые вызывали у вас головную боль? Мне интересно, потому что в выборе одного из известных вариантов (ng-grid, trNgGrid, ng-table, SmartTable) я только начинаю с ng-grid и после прочтения вашего поста и просмотра 10 голосов, которые я только что испугался!
спорт
1
Ну, некоторые из них были исправлены, я полагаю, они объединились, как запрос на 20 запросов, которые сидели там месяцами. Проблемы у меня были? многие из них были потому, что они используют div вместо таблицы для грима грида. Кроме того, события, которые отображает сетка, содержат ошибки, которые доставляют мне много проблем, потому что я реализовал поведение, подобное бесконечной прокрутке, событие прокрутки запускалось случайным образом в некоторых ситуациях, которые не должны. Авто-ширина столбцов не работает вообще.
agusluc
В конце концов, это будет зависеть от того, как вы хотите использовать сетку, и от уровня настройки, требуемой в вашем проекте. Проверьте github, прочитайте открытые выпуски, создайте демоверсию, которая охватит все ваши варианты использования и посмотрите, как она работает. Но помните, что ветка 2.x была заброшена, поэтому в будущем у вас будет нулевая поддержка.
agusluc
15

TrNgGrid работает отлично до сих пор. Вот причины, по которым я предпочитаю это ng-grid и перенести в этот компонент

  • Он делает элементы таблицы так, чтобы их можно было загружать и использовать всю мощь начальной загрузки .css (ng-grid использует темы пользовательского интерфейса jQuery).

  • Простые, хорошо документированные параметры сетки.

  • Размер страницы подкачки работает

Мэтью Маккинли
источник
10

В конце этого ответа на вопрос о том, как думать в Angular, если у вас есть опыт работы с jQuery, в главном посте Джоша Дэвида Миллера резюмируется:

Даже не используйте JQuery. Даже не включайте это. Это будет сдерживать вас. И когда вы сталкиваетесь с проблемой, которую, по вашему мнению, уже знаете, как решить ее в jQuery, прежде чем $пытаться ее решить , попробуйте подумать о том, как это сделать в пределах AngularJS. Если не знаешь, спроси! 19 раз из 20, лучший способ сделать это не нуждается в jQuery, и попытка решить его с помощью jQuery приводит к дополнительной работе для вас.

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

Однако jQuery DataTables плохо интегрируется с AngularJS. (Были предприняты различные усилия, но ни одна не предлагает бесшовную интеграцию.)

Возможно, это оставляет человека с двумя вариантами.

Первый - использовать чисто угловую сетку, которая не так богата, как DataTables. Я согласен с @Moonstom о том, что надоели другие угловые сетки, и trNgGrid выглядит неплохо.

Второй вариант состоит в том, чтобы сказать: это один из тех редких 1 из 20 случаев, когда вы должны использовать jQuery и использовать плагин jQuery DataTables, потому что попытки заново изобрести колесо с чистыми угловыми сетками привели к менее надежное колесо, чем DataTables.

Было бы хорошо, если бы это было иначе, но я просто не видел, чтобы экосистема Angular создавала такую ​​же сильную сетку, как jQuery DataTables, и это не так, как если бы хорошая сетка данных была полезна в веб-приложении. : хорошая сетка необходима.

mg1075
источник
+1 Так верно. Позор, что DataTables еще не был интегрирован; возможно, слишком тесно связан с DOM.
CSSian
2
Попробуйте это l-lin.github.io/angular-datatables
Крейг
9

Вы можете использовать классы начальной загрузки 3 и построить таблицу, используя директиву ng-repeat

Пример:

angular.module('App', []);

function ctrl($scope) {
    $scope.items = [
        ['A', 'B', 'C'],
        ['item1', 'item2', 'item3'],
        ['item4', 'item5', 'item6']
    ];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

живой пример: http://jsfiddle.net/choroshin/5YDJW/5/

Обновить:

или вы всегда можете попробовать популярную ng-grid , ng-grid удобна для сортировки, поиска, группировки и т. д., но я еще не тестировал ее для больших данных.

Алексей Чорошин
источник
7
Да, это стандартный способ создания таблицы без сортировки, разбивки на страницы, фильтрации, загрузки AJAX и т. Д. В Angular. Но с тысячами рядов это приведет к остановке любого приложения.
Mainguy
Это приведет к очень медленному интерфейсу.
boi_echos
8

Адапт-ремешок . Вот скрипка .

Это очень легкий и динамический ряд высоты.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>
kashyaphp
источник
Можно ли изменить ширину столбцов?
Томаш
4

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

Чтобы установить env:

  1. http://www.json-generator.com/ для генерации данных JSON. Это довольно крутой инструмент для получения набора образцов данных для ускорения разработки.

  2. Вы можете проверить этот поршень для вашей реализации. Я изменил, чтобы включить: поиск, выбор и разбиение на страницы http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Вы можете проверить этот учебник о Smart table, дает всю необходимую информацию: http://lorenzofox3.github.io/smart-table-website/

Тогда следующий вопрос bootstrap 3: это не совсем так, но этот шаблон выглядит хорошо. - Вы можете просто использовать https://github.com/angular-ui/bootstrap/tree/master/template, все шаблоны хорошо написаны.

Я могу продолжить о том, как конвертировать bootstrap 3 в angularjs, но это уже упоминалось в следующих ссылках:

обратите внимание, что в отношении смарт-таблицы вы должны проверить, готова ли она к вашей угловой версии

neoahead
источник
3

Сетка кендо хороша так же, как и Wijmo. Я знаю, что Кендо поставляется с привязками Angular для их источника данных, и я думаю, что Wijmo имеет плагин Angular. Ни один не свободен все же.

Тревор де Коеккук
источник
3
У меня был ужасный опыт работы с KendoUI. Он настолько раздут, что работает как собака и, похоже, так взломан для более сложных компонентов, что трудно, если не невозможно, заставить работать функции, которые, так сказать, недоступны «из коробки». Он также в значительной степени ориентирован на работу с их серверными компонентами и очень плохо документирован для крайних случаев. Я бы держался подальше от них!
Precastic