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

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

[обновление июля 2017]

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

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

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

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

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

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

trNgGrid

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

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

наслаждайтесь. Да, я автор. Я устал от всех угловых сеток там.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

было бы неплохо, если бы это было иначе, но я просто не видел угловая экосистема придумывает такую же сильную сетку, как и 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/

обновление:

или вы всегда можете попробовать самый популярный 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 bootstrap?
• https://github.com/angular-ui/bootstrap/issues/331

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

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