Cara terbaik untuk mewakili Kotak atau Tabel di AngularJS dengan Bootstrap 3? [Tutup]

284

Saya membuat Aplikasi dengan AngularJS dan Bootstrap 3. Saya ingin menampilkan tabel / kisi dengan ribuan baris. Apa kontrol terbaik yang tersedia untuk AngularJS & Bootstrap dengan fitur seperti Sorting, Searching, Pagination dll.

Rahat Khanna
sumber
6
Anda pasti harus melihat pada ng-grid di sini: angular-ui.github.io/ng-grid
mainguy
1
Mengapa tidak menggunakan Bootstrap UI? Baru-baru ini diperbarui untuk menggunakan Bootstrap 3: angular-ui.github.io/bootstrap
CallumVass
3
Ribuan baris itu seharusnya tidak semuanya dikirim ke klien. Karena itu solusi JavaScript murni tidak akan bekerja dengan baik. Server perlu melakukan pagination dan / atau mencari Anda.
flup
Lain kali coba berikan suntikan ke tabel ngTasty zizzamia.com/ng-tasty/directive/table itu berdasarkan tabel bootstrap css :)
zizzamia
3
angular pindah ke " ui-grid " yang akan memiliki fitur tabel inbuilt. alternatif yang baik untuk "jquery datatables"
diaryfolio

Jawaban:

223

Setelah mencoba ngGrid, ngTable, trNgGrid dan Smart Table , saya sampai pada kesimpulan bahwa Smart Table sejauh ini merupakan implementasi terbaik AngularJS-wise dan Bootstrap-wise. Itu dibangun persis dengan cara yang sama seperti Anda akan membangun sendiri, tabel naif Anda menggunakan sudut standar. Selain itu, mereka telah menambahkan beberapa arahan yang membantu Anda melakukan penyortiran, penyaringan, dll. Pendekatan mereka juga membuatnya cukup mudah untuk memperluas diri. Fakta bahwa mereka menggunakan tag html biasa untuk tabel dan ng-repeat standar untuk baris dan bootstrap standar untuk memformat menjadikan ini pemenang yang jelas.

Kode JS mereka tergantung pada sudut dan html Anda dapat bergantung pada bootstrap jika Anda mau. Kode JS adalah total 4 kb dan Anda bahkan dapat dengan mudah mengambil barang dari sana jika Anda ingin mencapai jejak yang lebih kecil.

Di mana grid lain akan memberi Anda claustrophobia di berbagai area, Smart Table hanya terasa terbuka dan to the point.

Jika Anda sangat bergantung pada pengeditan sisip dan fitur canggih lainnya, Anda mungkin bangun dan berjalan lebih cepat dengan ngTable misalnya. Namun, Anda bebas untuk menambahkan fitur seperti itu di Smart Table.

Jangan lewatkan Smart Table !!!

Saya tidak memiliki hubungan dengan Smart Table, kecuali menggunakannya sendiri.

Ricky Helgesson
sumber
12
Baru saja menemukan bug kecil di Smart Table, melaporkannya dan diperbaiki dalam beberapa jam. Saya kagum bahwa tidak semua orang menggunakan Smart Table - hanya saja jauh lebih baik daripada yang lain.
Ricky Helgesson
1
Smart Table jelas merupakan pilihan terbaik untuk AngularJS. Ada lebih banyak fitur di ngGrid, tetapi mudah untuk menambahkan fitur-fitur itu dengan memperluas Smart Table.
Toilal
1
ng-grid 3.0.7 sekarang dirilis, dan itu bekerja dengan baik untuk saya (sekarang disebut ui-grid)
Kimball Robinson
1
Masalahnya adalah: pagination di smart table benar-benar jelek, tidak ada halaman pertama, tidak ada halaman terakhir, pagination ng-table benar-benar lebih ergonomis. Hal yang sama untuk menyortir, pada smart-table kita tidak tahu kita bisa menyortir sebelum mengklik, itu sama sekali tidak ergonomis ...
amdev
1
Smart Table untuk skenario hanya baca sepele, ui-grid untuk semua yang lain, atau hanya ui-grid :)
RandomUs1r
116

Saya memiliki persyaratan yang sama dan menyelesaikannya menggunakan komponen-komponen ini:

Komponen tabel ng-grid mampu menampilkan ratusan baris dalam grid yang dapat digulir. Jika Anda harus berurusan dengan ribuan entri, Anda lebih baik menggunakan paginator ng-grid. Dokumentasi ng-grid sangat bagus dan berisi banyak contoh. Penyortiran dan pencarian didukung bahkan dalam kombinasi dengan pagination.

Berikut ini adalah tangkapan layar dari proyek saat ini untuk memberi Anda kesan seperti apa tampilannya:

masukkan deskripsi gambar di sini

[PEMBARUAN Juli 2017]

Setelah ng-grid dalam produksi selama beberapa tahun, saya masih bisa mengatakan bahwa tidak ada masalah besar dengan komponen ini. Ya, banyak bug kecil, tetapi tidak ada penghenti acara (setidaknya dalam kasus penggunaan saya). Karena itu, saya akan sangat menyarankan untuk tidak menggunakan komponen ini jika Anda memulai proyek dari awal. Komponen ini adalah pilihan yang baik hanya jika Anda terikat untuk AngularJS 1.0.x . Jika Anda bebas memilih versi Angular, pilih komponen yang lebih baru. Daftar komponen tabel untuk Angular 4 dikompilasi oleh Sam Deering di blog ini .

Lars Behnke
sumber
2
Wijmo juga menyediakan Arahan Arahan bersama dengan fitur seperti pengelompokan, pengurutan dll. Anda juga dapat memeriksa sampel Benchmark untuk ngGrid dan Wijmo Grid dengan AngularJS: demos.componentone.com/wijmo/Angular/GridBenchmark/…
Ashish
@Lars Behnke Bagaimana menerapkan gaya tabel Bootstrap ke ng-grid? Sejauh yang saya lihat, ng-grid tidak menggunakan tag tr tabel yang css Bootstrap mengandalkan.
elpddev
Implementasi komponen ng-grid tidak didasarkan pada Bootstrap. Jadi saya mengkustomisasi ng-grid.less untuk mendapatkan tampilan dan nuansa sedekat mungkin dengan elemen GUI bootstrap.
Lars Behnke
1
Project ng-grid telah ditulis ulang sebagai UI Grid yang tersedia di ui-grid.info
mostar
2
Statistik 2016 menunjukkan bahwa plugin ng-tables masih dalam permintaan: GitHub: A. ng-grid: ~ 3500 commit, ~ 800 issues. B. smart-table: ~ 300 commit, ~ 40 isu. C. ng-table: ~ 500 komit, ~ 200 masalah. Tren Google hanya membuktikan gagasan yang sama dengan membandingkan: "tabel pintar sudut", "kotak sudut ui", "tabel sudut ang". google.com/trends/…
Anton Lyhin
87

Dengan "ribuan baris", taruhan terbaik Anda tentu adalah melakukan paging sisi server. Ketika saya melihat ke tabel AngularJs yang berbeda / opsi grid beberapa waktu lalu ada tiga favorit yang jelas:

Ketiganya bagus, tetapi diimplementasikan secara berbeda. Yang mana yang Anda pilih mungkin akan lebih didasarkan pada preferensi pribadi daripada yang lain.

ng-grid mungkin yang paling dikenal karena hubungannya dengan angular-ui, tapi saya pribadi lebih suka ng-table , saya sangat suka implementasinya dan bagaimana Anda menggunakannya, dan mereka memiliki dokumentasi dan contoh yang bagus tersedia dan secara aktif ditingkatkan.

Pengacara
sumber
7
Saya senang melihat seseorang menyebutkan ng-table. Saya juga lebih suka ng-table daripada ng-grid karena memiliki gaya yang lebih baik, terutama dalam mode edit.
Rob J
2
Melompati kereta musik ngTable di sini. Saya pergi dengan ng-grid untuk sebuah proyek dan itu sudah cukup mengerikan. Aku pergi dengan ng-grid murni karena hubungannya dengan angular-ui dan tampaknya sedikit lebih aktif di github. Saya pikir saya akan beralih ke ngTable. Semoga tidak terlalu sulit.
Brett
10
Hai, pemula dengan ekosistem sudut, saya awalnya mencoba menggunakan ng-grid karena situs web yang "lebih baik", tetapi dengan cepat mengalami masalah gaya, karena struktur div yang bersarang. Sejauh ini saya suka ng-table lebih baik, karena sebenarnya menggunakan a table. Saya hanya bisa menerapkan kelas tabel bootstrap dan berfungsi ...
Pierre Henry
1
Perhatikan kode dan pendekatan smart-table telah berubah secara radikal dengan versinya v1.0.0 (Agustus 2014) sehingga komentar yang dibuat sebelum tanggal ini tidak relevan lagi
laurent
4
ng-table sebagian besar menjadi tidak aktif karena dikelola oleh satu orang di Ukraina dan ada banyak masalah lain di sana. ng-grid sedang ditulis ulang sebagai ui-grid untuk versi 3.0 tetapi belum siap untuk diproduksi. Jadi sekarang umumnya bukan waktu yang tepat untuk memilih atau mengganti implementasi tabel Angular. Smart-Table juga dikelola oleh kurang lebih satu orang. Kami saat ini menggunakan ng-table, tetapi kami berencana untuk beralih ke ui-grid saat jatuh tempo.
Splaktar
77

Grid Angular kaya fitur adalah ini:

trNgGrid

Beberapa fitur-fiturnya:

  • Dibangun dengan kesederhanaan dalam pikiran.
  • Menggunakan tabel HTML biasa, memungkinkan browser untuk mengoptimalkan rendering.
  • Sepenuhnya deklaratif, menjaga pemisahan kekhawatiran, sehingga memungkinkan Anda untuk sepenuhnya menggambarkannya dalam HTML, tanpa mengacaukan pengontrol Anda.
  • Sepenuhnya dapat dikustomisasi melalui templat dan atribut terikat data dua arah.
  • Mudah dirawat, memiliki kode yang ditulis dalam TypeScript.
  • Memiliki daftar dependensi yang sangat singkat: AngularJs dan Bootstrap CSS, dengan tema Bootswatch opsional.

trNgGrid

Nikmati. Ya, saya penulisnya. Saya muak dengan semua grid Angular di luar sana.

MoonStom
sumber
5
Yang ini perlu lebih banyak pengakuan. Saya mulai dengan ngGrid. Saya tidak tahu versi mana yang seharusnya saya gunakan karena saya kira saya mulai melihat antara transisi 2.x ke 3.x mereka dan saya bahkan tidak bisa mendapatkan tabel untuk bekerja. Kemudian saya pindah ke ngTablejenis pekerjaan yang mana. Saya tidak bisa mendapatkan penyortiran atau paging untuk bekerja dengan benar, tapi itu karena cara saya memuat data $http. Lalu aku melihat ini trNgGriddan omong kosong ... sangat mudah untuk berdiri dan berlari. Seandainya saya bisa menulis lebih banyak di sini, tapi saya sarankan semua orang mencoba yang ini dulu!
Ronnie
2
Saya sepenuhnya setuju dengan @Ronnie. Ini harus lebih diperhatikan. Setelah seharian 'berkelahi' dengan ng-grid / ui-grid untuk melakukan sesuatu yang sedikit lebih kompleks, saya mencoba trNgGrid dan bekerja pada percobaan pertama.
Johnny Everson
4
itu terlihat bagus, meskipun tidak dapat menemukan item penting seperti tajuk tetap, kolom yang dapat
diubah ukurannya
bootstrap merupakan ketergantungan yang sulit? Saya ingin kisi saya menggunakan custom css. bisa jadi?
Jasdeep Singh
Ini membutuhkan lebih banyak pengakuan. Saya sangat dekat dengan ng-grid sampai saya menyadari bahwa ia bahkan tidak menggunakan tabel html.
ryanwinchester
39

Bagi siapa pun yang membaca posting ini: Bantulah diri Anda sendiri dan menjauhlah dari ng-grid. Penuh dengan bug (sungguh..sebagian besar bagian lib rusak entah bagaimana), para devs telah meninggalkan dukungan cabang 2.0.x untuk bekerja di 3.0 yang sangat jauh dari siap. Memperbaiki masalah sendiri bukanlah tugas yang mudah, kode ng-grid tidak kecil dan tidak sederhana, kecuali jika Anda memiliki banyak waktu dan pengetahuan yang mendalam tentang sudut dan js secara umum, itu akan menjadi tugas yang sulit.

Intinya: penuh dengan bug, dan versi stabil terakhir telah ditinggalkan.

Github penuh dengan PR, tetapi mereka diabaikan. Dan jika Anda melaporkan bug di cabang 2.x, berarti sudah ditutup.

Saya tahu ini adalah proyek sumber terbuka dan komplainnya mungkin terdengar agak tidak pada tempatnya, tetapi dari perspektif pengembang mencari perpustakaan, itu pendapat saya. Saya menghabiskan banyak waktu bekerja dengan ng-grid di proyect besar dan headcaches tidak pernah berakhir

agusluc
sumber
Bisakah Anda memberi tahu kami beberapa contoh bug / skenario ini yang membuat Anda sakit kepala? Saya tertarik karena dalam memilih salah satu opsi terkenal (ng-grid, trNgGrid, ng-table, SmartTable) saya baru mulai dengan ng-grid dan setelah membaca posting Anda dan melihat 10 upvotes saya baru saja takut!
Olah raga
1
Yah, beberapa dari mereka diperbaiki saya percaya, mereka bergabung seperti 20 permintaan tarik yang duduk di sana selama berbulan-bulan. Masalah yang saya miliki? banyak dari mereka karena mereka menggunakan divs bukan meja untuk makeup kotak. Juga peristiwa yang dipaparkan oleh grid buggy, yang memberi saya banyak masalah karena saya menerapkan perilaku seperti gulir yang tak terbatas, acara gulir itu menembak secara acak dalam beberapa situasi yang seharusnya tidak. Lebar kolom otomatis tidak berfungsi sama sekali.
agusluc
Pada akhirnya, itu akan tergantung pada bagaimana Anda ingin menggunakan kisi, dan tingkat penyesuaian yang diperlukan dalam proyek Anda. Periksa github, baca masalah terbuka, buat beberapa demo yang mencakup semua kasus penggunaan Anda dan lihat cara kerjanya. Tapi ingat, dev cabang 2.x telah ditinggalkan, jadi Anda tidak akan memiliki dukungan di masa depan.
agusluc
15

TrNgGrid bekerja dengan baik sejauh ini. Berikut adalah alasan saya lebih suka ng-grid dan pindah ke komponen ini

  • Itu membuat elemen tabel sehingga bisa bootswatch dan menggunakan semua kekuatan bootstrap .css (ng-grid menggunakan tema jQuery UI).

  • Opsi kisi yang sederhana dan didokumentasikan dengan baik.

  • Paging ukuran server berfungsi

Matthew McKinley
sumber
10

Pada akhir jawaban ini untuk pertanyaan tentang bagaimana berpikir dalam Angular jika Anda memiliki latar belakang jQuery, pos teratas dari Josh David Miller merangkum:

Jangan gunakan jQuery. Bahkan tidak memasukkannya. Itu akan menahan Anda. Dan ketika Anda sampai pada masalah yang Anda pikir Anda tahu bagaimana menyelesaikannya di jQuery, sebelum Anda meraihnya $, coba pikirkan bagaimana melakukannya dalam batas AngularJS. Jika Anda tidak tahu, tanyakan! 19 kali dari 20, cara terbaik untuk melakukannya tidak perlu jQuery dan mencoba menyelesaikannya dengan hasil jQuery dalam pekerjaan yang lebih banyak untuk Anda.

Sekarang jika Anda menginginkan kisi dengan banyak fitur dan opsi untuk penyesuaian, jQuery DataTables adalah salah satu yang terbaik. Grid Angular-only yang saya lihat tidak mendekati apa yang bisa dilakukan jQuery DataTables.

Namun , jQuery DataTables tidak terintegrasi dengan baik dengan AngularJS. (Ada berbagai upaya, tetapi tidak ada yang menawarkan integrasi tanpa batas.)

Mungkin itu meninggalkan seseorang dengan dua pilihan.

Yang pertama adalah pergi dengan grid Angular murni yang tidak kaya fitur seperti DataTables. Saya setuju dengan @Moonstom tentang bosan dengan grid Angular lain di luar sana, dan trNgGrid memang terlihat bagus.

Opsi kedua adalah mengatakan: ini adalah salah satu dari 1 dari 20 kasus yang langka di mana Anda harus menggunakan jQuery dan menggunakan plug-in jQuery DataTables, karena upaya untuk menemukan kembali roda dengan kisi Angular murni telah menghasilkan roda kurang kuat dari DataTables.

Akan lebih baik jika sebaliknya, tapi saya belum melihat ekosistem Angular muncul dengan sekuat grid seperti jQuery DataTables, dan bukan seolah-olah grid data yang baik adalah yang bagus untuk dimiliki dalam aplikasi web : grid yang bagus adalah yang esensial.

mg1075
sumber
+1 Benar sekali. Sayang sekali bahwa DataTables belum terintegrasi; mungkin terlalu erat digabungkan ke DOM.
CSSian
9

Anda dapat menggunakan bootstrap 3 kelas dan membangun tabel menggunakan arahan ng-repeat

Contoh:

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>

contoh hidup: http://jsfiddle.net/choroshin/5YDJW/5/

Memperbarui:

atau Anda selalu dapat mencoba ng-grid populer , ng-grid baik untuk menyortir, mencari, mengelompokkan dll, tapi saya belum mengujinya pada data skala besar.

Alex Choroshin
sumber
7
Yap, itulah cara standar untuk membuat tabel tanpa pengurutan, pagination, filtering, ajax raloading, dll di Angular. Tetapi dengan ribuan baris ini akan membuat aplikasi apa pun terhenti.
mainguy
Ini akan menghasilkan UI yang sangat lamban.
boi_echos
8

Adaptasi-Tali . Ini biola .

Ini sangat ringan dan memiliki ketinggian baris dinamis.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>
kashyaphp
sumber
Apakah mungkin untuk mengubah lebar kolom?
Tomasz Waszczyk
4

Seperti disebutkan dalam jawaban lain: Untuk tabel dengan pencarian, pilih dan paginasi " ng-grid " adalah opsi terbaik. Beberapa hal yang saya temui akan saya sebutkan yang mungkin berguna saat menerapkan:

Untuk mengatur env:

  1. http://www.json-generator.com/ untuk menghasilkan data JSON. Ini alat yang sangat keren untuk mendapatkan set data sampel Anda untuk membuat pengembangan lebih cepat.

  2. Anda dapat memeriksa plunker ini untuk implementasi Anda. Saya telah memodifikasi untuk memasukkan: cari, pilih dan pagination http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Anda dapat memeriksa tutorial ini tentang tabel Smart, Memberikan semua informasi yang Anda butuhkan: http://lorenzofox3.github.io/smart-table-website/

Maka pertanyaan selanjutnya adalah bootstrap 3: Ini tidak persis tetapi template ini terlihat bagus. - Anda bisa menggunakan https://github.com/angular-ui/bootstrap/tree/master/template semua templat ditulis dengan baik.

Saya dapat melanjutkan tentang bagaimana mengkonversi bootstrap 3 ke angularjs tetapi sudah disebutkan di tautan berikut:

harap dicatat bahwa mengenai smart-table Anda harus memeriksa apakah ini siap untuk versi sudut Anda

neoahead
sumber
3

Kendo grid bagus juga untuk Wijmo. Saya tahu Kendo datang dengan binding Angular untuk sumber data mereka dan saya pikir Wijmo memiliki plugin Angular. Tidak ada yang gratis.

Trevor de Koekkoek
sumber
3
Saya memiliki pengalaman mengerikan dengan KendoUI. Ini sangat membengkak sehingga berjalan seperti anjing & tampaknya begitu diretas bersama untuk komponen yang lebih kompleks sehingga sulit jika bukan tidak mungkin untuk mendapatkan fitur yang berfungsi yang tidak tersedia "di luar kotak" untuk berbicara. Itu juga sangat diarahkan untuk bekerja dengan komponen server mereka & sangat buruk didokumentasikan untuk kasus tepi. Saya akan tinggal jauh dari mereka!
Precastic