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

У меня было такое же требование и я решил использовать эти компоненты:

• 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-таблицы таблицы способен отображать сотни строк в прокручиваемой сетке. Если вам нужно иметь дело с тысячами записей, вам лучше использовать ng-grid paginator. Документация ng-grid превосходна и содержит много примеров. Сортировка и поиск поддерживаются даже в сочетании с разбиением на страницы.

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

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

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

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

• ng-grid
• ng-table
• Smart-Table

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

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

Богатая Angular сетка с функциями:

trNgGrid

Некоторые из его возможностей:

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

Enjoy. Да, я автор. Я устал от всех сеток Angular там.

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

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

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

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

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

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

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

• Работа подкачки сервера

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

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

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

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

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

В первую очередь нужно перейти с чистой сетью Angular, которая не является такой функциональной, как DataTables. Я согласен с @Moonstom в том, что мне надоели другие сетки Angular там, и trNgGrid выглядит хорошо.

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

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

Вы можете использовать классы bootstrap 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/

Update:

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

Adapt-Strap. Вот fiddle.

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

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

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

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

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

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

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

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

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

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

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

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