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

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

Попробовав 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, кроме как использовать его сам.

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

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0 : совместим с AngularJS 1.0.8 и Boostrap CSS 3.x.
• ng-grid 2.0.7 : совместимо с AngularJS 1.0.8
• Bootstrap CSS 3.0

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

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

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

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

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

• нг-сетка
• нг-таблица
• Смарт-Table

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

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

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

trNgGrid

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

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

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

Для тех, кто читает этот пост: сделайте себе одолжение и держитесь подальше от 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. Даже не включайте это. Это будет сдерживать вас. И когда вы сталкиваетесь с проблемой, которую, по вашему мнению, уже знаете, как решить ее в 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, и это не так, как если бы хорошая сетка данных была полезна в веб-приложении. : хорошая сетка необходима.

Вы можете использовать классы начальной загрузки 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 удобна для сортировки, поиска, группировки и т. д., но я еще не тестировал ее для больших данных.

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

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

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

Как уже упоминалось в других ответах: для таблицы с поиском выберите и разбейте на страницы " 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, но это уже упоминалось в следующих ссылках:

• Bootstrap 3 совместим с действующими директивами по загрузке AngularJS?
• https://github.com/angular-ui/bootstrap/issues/331

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

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