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

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.

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.

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

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0 : Kompatibel dengan AngularJS 1.0.8 dan Boostrap CSS 3.x.
• ng-grid 2.0.7 : Kompatibel dengan AngularJS 1.0.8
• Bootstrap CSS 3.0

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 .

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:

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

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.

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.

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

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

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

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.

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.

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>

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:

• Bootstrap 3 kompatibel dengan arahan bootstrap AngularJS saat ini?
• https://github.com/angular-ui/bootstrap/issues/331

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

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.