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.
angularjs
twitter-bootstrap-3
ng-grid
angular-ui-grid
smart-table
Rahat Khanna
sumber
sumber
Jawaban:
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.
sumber
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:
[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 .
sumber
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.
sumber
table
. Saya hanya bisa menerapkan kelas tabel bootstrap dan berfungsi ...Grid Angular kaya fitur adalah ini:
trNgGrid
Beberapa fitur-fiturnya:
Nikmati. Ya, saya penulisnya. Saya muak dengan semua grid Angular di luar sana.
sumber
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 kengTable
jenis 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 initrNgGrid
dan 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!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
sumber
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
sumber
Pada akhir jawaban ini untuk pertanyaan tentang bagaimana berpikir dalam Angular jika Anda memiliki latar belakang jQuery, pos teratas dari Josh David Miller merangkum:
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.
sumber
Anda dapat menggunakan bootstrap 3 kelas dan membangun tabel menggunakan arahan ng-repeat
Contoh:
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.
sumber
Adaptasi-Tali . Ini biola .
Ini sangat ringan dan memiliki ketinggian baris dinamis.
sumber
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:
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.
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
sumber
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.
sumber