Я создаю приложение с AngularJS и Bootstrap 3. Я хочу показать таблицу / сетку с тысячами строк. Каков наилучший доступный элемент управления для AngularJS & Bootstrap с такими функциями, как сортировка, поиск, разбиение на страницы и т. Д.
284
Ответы:
Попробовав 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, кроме как использовать его сам.
источник
У меня было такое же требование, и я решил его с помощью этих компонентов:
Компонент таблицы ng-grid способен отображать сотни строк в прокручиваемой сетке. Если вам приходится иметь дело с тысячами записей, вам лучше использовать пагинатор ng-grid. Документация по ng-grid превосходна и содержит много примеров. Сортировка и поиск поддерживаются даже в сочетании с нумерацией страниц.
Вот скриншот из текущего проекта, чтобы дать вам представление о том, как он выглядит:
[ОБНОВЛЕНИЕ Июль 2017]
После нескольких лет эксплуатации ng-grid я могу сказать, что с этим компонентом нет серьезных проблем. Да, много мелких ошибок, но не показывать пробки (по крайней мере, в моих случаях использования). Сказав это, я настоятельно рекомендую не использовать этот компонент, если вы начинаете проект с нуля. Этот компонент представляет собой вариант хорош только если вы обязаны AngularJS 1.0.x . Если вы можете выбрать версию Angular, перейдите на новый компонент. Список компонентов таблицы для Angular 4 был составлен Сэмом Дирингом в этом блоге .
источник
При «тысячах строк» лучше всего было бы делать пейджинг на стороне сервера. Когда я некоторое время назад изучал различные параметры таблицы / сетки AngularJ, у меня было три явных фаворита:
Все три хороши, но реализованы по-разному. Какой из них вы выберете, вероятно, будет более основанным на личных предпочтениях, чем что-либо еще
ng-grid , вероятно, является самым известным из-за его связи с angular-ui, но я лично предпочитаю ng-table , мне очень нравится их реализация и то, как вы ее используете, и у них есть отличная документация и примеры, доступные и активно улучшающиеся.
источник
table
. Я могу просто применить класс начальной загрузки таблицы, и это работает ...Это многофункциональная угловая сетка:
trNgGrid
Некоторые из его особенностей:
Наслаждаться. Да, я автор. Мне надоели все угловые сетки там.
источник
ngGrid
. Я не мог понять, какую версию я должен был использовать, так как, по-моему, я начал искать между их переходами с 2.x на 3.x, и при этом я даже не смог заставить таблицу работать. Затем я перешел наngTable
какую работу. Я не мог заставить сортировку или пейджинг работать правильно, но это из-за способа загрузки данных$http
. Потом я увидел этоtrNgGrid
и святое дерьмо ... так легко встать и бежать. Хотелось бы мне написать больше здесь, но я предлагаю всем сначала попробовать!Для тех, кто читает этот пост: сделайте себе одолжение и держитесь подальше от ng-grid. Он полон ошибок (на самом деле ... почти каждая часть библиотеки каким-то образом повреждена), разработчики отказались от поддержки ветки 2.0.x, чтобы работать в 3.0, которая очень далека от готовности. Устранить проблемы самостоятельно - непростая задача, код ng-grid не мал и не прост, если у вас нет много времени и глубоких знаний angular и js в целом, это будет трудной задачей.
Итог: полон ошибок, а последняя стабильная версия была заброшена.
Github полон PR, но они игнорируются. И если вы сообщаете об ошибке в ветке 2.x, она закрывается.
Я знаю, что это проект с открытым исходным кодом, и жалобы могут звучать немного неуместно, но с точки зрения разработчика, ищущего библиотеку, это мое мнение. Я провел много часов, работая с ng-grid в большом проекте, и головные боли никогда не заканчивались
источник
TrNgGrid работает отлично до сих пор. Вот причины, по которым я предпочитаю это ng-grid и перенести в этот компонент
Он делает элементы таблицы так, чтобы их можно было загружать и использовать всю мощь начальной загрузки .css (ng-grid использует темы пользовательского интерфейса jQuery).
Простые, хорошо документированные параметры сетки.
Размер страницы подкачки работает
источник
В конце этого ответа на вопрос о том, как думать в Angular, если у вас есть опыт работы с jQuery, в главном посте Джоша Дэвида Миллера резюмируется:
Теперь, если вам нужна сетка с множеством функций и опций для настройки, jQuery DataTables является одним из лучших. Сетки только для углов, которые я видел, не приближаются к возможностям jQuery DataTables.
Однако jQuery DataTables плохо интегрируется с AngularJS. (Были предприняты различные усилия, но ни одна не предлагает бесшовную интеграцию.)
Возможно, это оставляет человека с двумя вариантами.
Первый - использовать чисто угловую сетку, которая не так богата, как DataTables. Я согласен с @Moonstom о том, что надоели другие угловые сетки, и trNgGrid выглядит неплохо.
Второй вариант состоит в том, чтобы сказать: это один из тех редких 1 из 20 случаев, когда вы должны использовать jQuery и использовать плагин jQuery DataTables, потому что попытки заново изобрести колесо с чистыми угловыми сетками привели к менее надежное колесо, чем DataTables.
Было бы хорошо, если бы это было иначе, но я просто не видел, чтобы экосистема Angular создавала такую же сильную сетку, как jQuery DataTables, и это не так, как если бы хорошая сетка данных была полезна в веб-приложении. : хорошая сетка необходима.
источник
Вы можете использовать классы начальной загрузки 3 и построить таблицу, используя директиву ng-repeat
Пример:
живой пример: http://jsfiddle.net/choroshin/5YDJW/5/
Обновить:
или вы всегда можете попробовать популярную ng-grid , ng-grid удобна для сортировки, поиска, группировки и т. д., но я еще не тестировал ее для больших данных.
источник
Адапт-ремешок . Вот скрипка .
Это очень легкий и динамический ряд высоты.
источник
Как уже упоминалось в других ответах: для таблицы с поиском выберите и разбейте на страницы " ng-grid " - это лучшие варианты. Я упомяну пару вещей, которые могут быть полезны при реализации:
Чтобы установить env:
http://www.json-generator.com/ для генерации данных JSON. Это довольно крутой инструмент для получения набора образцов данных для ускорения разработки.
Вы можете проверить этот поршень для вашей реализации. Я изменил, чтобы включить: поиск, выбор и разбиение на страницы 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, но это уже упоминалось в следующих ссылках:
обратите внимание, что в отношении смарт-таблицы вы должны проверить, готова ли она к вашей угловой версии
источник
Сетка кендо хороша так же, как и Wijmo. Я знаю, что Кендо поставляется с привязками Angular для их источника данных, и я думаю, что Wijmo имеет плагин Angular. Ни один не свободен все же.
источник