Найкращий спосіб представити сітку або таблицю в AngularJS за допомогою Bootstrap 3? [зачинено]

Я створюю додаток з AngularJS та Bootstrap 3. Хочу показати таблицю / сітку з тисячами рядків. Який найкращий доступний елемент управління для AngularJS & Bootstrap з такими функціями, як Сортування, Пошук, Пагинація тощо.

Спробувавши ngGrid, ngTable, trNgGrid та Smart Table , я прийшов до висновку, що Smart Table на сьогоднішній день є найкращою реалізацією AngularJS-mud і Bootstrap. Він побудований точно так само, як ви побудували власний, наївний стіл, використовуючи стандартні кутові. Крім того, вони додали кілька директив, які допомагають вам сортувати, фільтрувати і т. Д. Їхній підхід також дозволяє досить просто розширити себе. Те, що вони використовують звичайні теги html для таблиць і стандартне ng-повторення для рядків і стандартне завантажувальне для форматування, робить це моїм явним переможцем.

Їх 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
• Завантажувальний CSS 3.0

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

Ось знімок екрана з поточного проекту, щоб створити враження: як це виглядає:

[ОНОВЛЕННЯ липня 2017]

Отримавши ng-сітку у виробництві протягом декількох років, я все ще можу сказати, що з цим компонентом немає основних проблем. Так, безліч дрібних помилок, але немає показів (хоча б у моїх випадках використання). Сказавши це, я б настійно радив не використовувати цей компонент, якщо ви починаєте проект з нуля. Цей компонент є варіант хороший тільки якщо ви зобов'язані AngularJS 1.0.x . Якщо ви вільні вибирати кутову версію, перейдіть до нової складової. Список компонентів таблиці для Angular 4 склав Сем Дірінг у цьому блозі .

З "тисячами рядків" найкращою ставкою буде очевидно зробити підкачку на стороні сервера. Коли я заглянув у різні параметри таблиці / сітки AngularJs, назад було три чіткі фаворити:

• нг-сітка
• нг-стіл
• Smart-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 в цілому, це буде важким завданням.

Підсумок: повна помилок, і остання стабільна версія була залишена.

Гитуб переповнений піарами, але їх ігнорують. І якщо ви повідомлите про помилку у гілці 2.x, вона закриється.

Я знаю, що проєкт з відкритим кодом, і скарги можуть здатися трохи поза місцем, але з точки зору розробника, який шукає бібліотеку, це моя думка. Я багато годин працював з нг-сіткою у великому проекті, і головних уборів ніколи не закінчується

TrNgGrid поки чудово працює. Ось причини, які я віддаю перевагу тому, що він ng-grid і перейшов до цього компонента

• Це робить елементи таблиці, щоб можна було переглядати черевики та використовувати всю потужність bootstrap .css (ng-grid використовує теми jQuery UI).

• Прості, добре задокументовані варіанти сітки.

• Підказка розміру сервера працює

Наприкінці цієї відповіді на питання, як думати в 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.

Було б добре, якби це було інакше, але я просто не бачив, щоб кутова екосистема створила настільки сильну сітку, як 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-сітку , 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, надає всю необхідну інформацію: 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/isissue/331

зауважте, що стосовно смарт-таблиці ви повинні перевірити, чи готовий він для вашої кутової версії

Сітка Kendo хороша, як і Wijmo. Я знаю, що Кендо має кутові прив’язки для своїх джерел даних, і я думаю, що у Wijmo є кутовий плагін. Жоден з них не є безкоштовним.