Bootstrap 3 ile AngularJS'de bir Izgara veya Tablo temsil etmenin en iyi yolu? [kapalı]

AngularJS ve Bootstrap 3 ile bir uygulama oluşturuyorum. Binlerce satır içeren bir tablo / ızgara göstermek istiyorum. Sıralama, Arama, Sayfalandırma gibi özelliklere sahip AngularJS & Bootstrap için mevcut en iyi kontrol nedir?

NgGrid, ngTable, trNgGrid ve dışarı denedikten sonra Akıllı Tablo , bunu sonucuna vardık Akıllı Masa kadar iyi uygulama angularjs-bilge ve Bootstrap-bilge gereğidir. Standart açısal kullanarak kendi naif masanızı inşa ettiğiniz gibi inşa edilmiştir. Bunun üzerine, sıralama, filtreleme vb. Yapmanıza yardımcı olan birkaç direktif eklediler. Yaklaşımları da kendinizi genişletmenizi oldukça kolaylaştırıyor. Tablolar için normal html etiketlerini ve satırlar için standart ng-tekrarı ve biçimlendirme için standart önyükleme kullandıkları gerçeği bunu açık bir şekilde kazanmamı sağlıyor.

Onların JS kodu açısal bağlıdır ve isterseniz html bootstrap bağlı olabilir. JS kodu toplamda 4 kb'dir ve daha da küçük bir kaplama alanına ulaşmak istiyorsanız, oradan kolayca bir şeyler seçebilirsiniz.

Diğer ızgaraların size farklı alanlarda klostrofobi vereceği yerde, Akıllı Masa kendini açık ve noktaya hissettiriyor.

Satır içi düzenlemeye ve diğer gelişmiş özelliklere büyük ölçüde güveniyorsanız, örneğin ngTable ile daha hızlı çalışmaya başlayabilirsiniz. Ancak, Akıllı Tablo'da bu tür özellikleri kolayca ekleyebilirsiniz.

Smart Table kaçırmayın !!!

Smart Table ile kendim kullanmak dışında hiçbir ilişkim yok.

Aynı gereksinime sahiptim ve bu bileşenleri kullanarak çözdüm:

• Açısal JS 1.0.8
• AngularUI Boostrap 0.10.0 : AngularJS 1.0.8 ve Boostrap CSS 3.x ile uyumludur.
• ng-grid 2.0.7 : AngularJS 1.0.8 ile uyumlu
• Bootstrap CSS 3.0

Tablo bileşeni ng-grid kaydırılabilir bir ızgarada yüzlerce satırı görüntüleyebilir. Binlerce girişle uğraşmak zorunda kalırsanız, ng-grid'in sayfalayıcısını kullanmak daha iyidir. Ng-grid dokümantasyonu mükemmel ve birçok örnek içeriyor. Sıralama ve arama, sayfalandırma ile birlikte desteklenir.

İşte size nasıl göründüğü hakkında bir izlenim vermek için mevcut bir projeden bir ekran görüntüsü:

[GÜNCELLEME Temmuz 2017]

Birkaç yıl boyunca üretimde ng-grid yaptıktan sonra, hala bu bileşenle ilgili önemli bir sorun olmadığını söyleyebilirim. Evet, küçük hatalar bol, ama hiçbir gösteri tıpalar (en azından benim kullanım durumlarda). Bunu söyledikten sonra, sıfırdan bir projeye başlarsanız bu bileşeni kullanmaya karşı şiddetle tavsiye ederim. Bu bileşen yalnızca AngularJS 1.0.x'e bağlıysanız iyi bir seçenektir . Açısal sürümü seçmekte özgürseniz, daha yeni bir bileşen seçin. Angular 4 için tablo bileşenlerinin bir listesi bu blogda Sam Deering tarafından derlenmiştir .

"Binlerce satır" ile en iyi bahis açıkçası sunucu tarafı sayfalama yapmak olacaktır. Bir süre farklı AngularJs tablo / ızgara seçenekleri içine baktığımda üç açık sık vardı:

• ng ızgara
• ng masaları
• Smart-Masa

Üçü de iyidir, ancak farklı şekilde uygulanır. Hangisini seçerseniz, muhtemelen her şeyden daha fazla kişisel tercihe dayalı olacaktır.

ng-grid muhtemelen en çok açısal-ui ile ilişkisi nedeniyle bilinir, ama kişisel olarak ng-tabloyu tercih ederim , uygulamalarını ve nasıl kullandığınızı gerçekten çok seviyorum ve mevcut harika belgelere ve örneklere sahipler ve aktif olarak geliştiriliyorlar.

Zengin özellikli açısal ızgara şudur:

trNgGrid

Bazı özellikleri:

• Sadelik düşünülerek inşa edilmiştir.
• Tarayıcıların oluşturmayı optimize etmesine izin veren düz HTML tabloları kullanıyor.
• Tamamen bildirici, endişelerin ayrılmasını koruyarak, denetleyicilerinizi bozmadan HTML'de tam olarak tanımlamanızı sağlar.
• Şablonlar ve iki yönlü veri bağlantılı özellikler aracılığıyla tamamen özelleştirilebilir.
• Kodun TypeScript ile yazılmış olması, bakımı kolaydır.
• Çok kısa bir bağımlılık listesine sahiptir: AngularJ'ler ve Bootstrap CSS, isteğe bağlı Bootswatch temaları.

Zevk almak. Evet, ben yazarım. Orada tüm Açısal ızgaralardan bıktım.

Bu yazıyı okuyan herkes için: Kendinize bir iyilik yapın ve ng-grid'den uzak durun. Hatalarla dolu (gerçekten .. lib'in hemen hemen her kısmı bir şekilde kırılmış), devs, hazır olmaktan çok uzakta olan 3.0'da çalışmak için 2.0.x şubesinin desteğini terk etti. Sorunları kendiniz düzeltmek kolay bir iş değildir, ng-grid kodu küçük değildir ve çok fazla zamanınız ve genel olarak açısal ve js hakkında derin bir bilgi sahibi olmadıkça, zor bir görev olacaktır.

Alt satır: hatalarla dolu ve son kararlı sürüm terk edildi.

Github PR'larla doludur, ancak yok sayılmaktadır. Ve 2.x dalında bir hata bildirirseniz, kapatılır.

Açık kaynaklı bir proyect olduğunu biliyorum ve şikayetler biraz yerinde görünmeyebilir, ancak kütüphane arayan bir geliştiricinin bakış açısına göre, bu benim görüşüm. Büyük bir proyect içinde ng-grid ile çalışarak uzun saatler geçirdim ve headcaches asla bitmiyor

TrNgGrid şu ana kadar harika çalışıyor. İşte ng-grid tercih ve bu bileşen taşındı nedenleri

• Çizme izlenebilir ve bootstrap .css (ng-grid jQuery UI temalarını kullanır) tüm gücünü kullanmak için tablo öğeleri yapar.

• Basit, iyi belgelenmiş ızgara seçenekleri.

• Sunucu boyutu sayfalama işleri

Bir jQuery geçmişiniz varsa Angular'da nasıl düşünüleceği sorusunun bu cevabının sonunda, Josh David Miller'ın üst yazısı şöyle özetliyor:

JQuery bile kullanmayın. Ekleme bile. Seni geri tutacak. Ve zaten jQuery'de nasıl çözeceğinizi bildiğinizi düşündüğünüz bir soruna geldiğinizde, ulaşmadan önce $, AngularJS sınırları içinde nasıl yapılacağını düşünmeye çalışın. Eğer bilmiyorsan sor! 20 üzerinden 19 kez, bunu yapmanın en iyi yolu jQuery gerekmez ve jQuery ile çözmeye çalışmak sizin için daha fazla iş sonuçları sağlar.

Özelleştirme için tonlarca özellik ve seçenek içeren bir ızgara istiyorsanız, jQuery DataTables en iyilerinden biridir. Gördüğüm yalnızca Açısal ızgaralar, jQuery DataTables'ın yapabileceklerine yaklaşmıyor.

Ancak , jQuery DataTables, AngularJS ile iyi entegre olmaz. (Çeşitli çabalar olmuştur, ancak hiçbiri kesintisiz entegrasyon sunmamaktadır.)

Belki de bir insanı iki seçenekle bırakır.

Birincisi, DataTable'lar kadar zengin olmayan saf bir Açısal ızgara ile gitmektir. @Moonstom'a, diğer Açısal ızgaralardan bıkmak konusunda hemfikirim ve trNgGrid güzel görünüyor.

İkinci seçenek: bu, jQuery'yi kullanmanız ve jQuery DataTables eklentisiyle gitmeniz gereken 20 durumdan 1'inde nadir bulunanlardan biridir, çünkü tekerleği saf Açısal ızgaralarla yeniden icat etme çabaları DataTable'lardan daha az sağlam tekerlek.

Aksi olsaydı iyi olurdu, ama Açısal ekosistemin jQuery DataTables kadar güçlü bir ızgara oluşturduğunu görmedim ve iyi bir veri ızgarası bir web uygulamasında olması güzel bir şey değil gibi : iyi bir ızgara esastır.

Ng-repeat yönergesini kullanarak bootstrap 3 sınıflarını kullanabilir ve bir tablo oluşturabilirsiniz

Misal:

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>

canlı örnek: http://jsfiddle.net/choroshin/5YDJW/5/

Güncelleme:

ya da her zaman popüler ng-grid deneyebilirsiniz , ng-grid sıralama, arama, gruplama vb için iyidir, ancak henüz büyük ölçekli veriler üzerinde test etmedim.

Adapt Kayışı . İşte keman .

Son derece hafiftir ve dinamik satır yüksekliklerine sahiptir.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

Diğer cevaplarda belirtildiği gibi: Arama içeren bir tablo için, seçim ve sayfalama " ng-grid " en iyi seçenektir. Karşılaştığım birkaç şey, uygularken faydalı olabileceklerinden bahsedeceğim:

Env'yi ayarlamak için:

1. JSON verileri oluşturmak için http://www.json-generator.com/ . Geliştirmeyi daha hızlı hale getirmek için örnek veri kümenizi almak için oldukça güzel bir araçtır.

2. Uygulamanız için bu dalma pistonunu kontrol edebilirsiniz. Dahil etmek için değiştirdim: arama, seçme ve sayfalandırma http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Akıllı tablo hakkında bu öğreticiyi kontrol edebilirsiniz, ihtiyacınız olan tüm bilgileri verir: http://lorenzofox3.github.io/smart-table-website/

Sonra bir sonraki soru bootstrap 3: Tam olarak değil ama bu şablonlar iyi görünüyor. - Sadece tüm şablonlar iyi yazılmış https://github.com/angular-ui/bootstrap/tree/master/template kullanabilirsiniz .

Bootstrap 3'ün angularjs'e nasıl dönüştürüleceği hakkında devam edebilirim, ancak aşağıdaki bağlantılarda zaten belirtilmiştir:

• Bootstrap 3 geçerli AngularJS bootstrap direktifleriyle uyumlu mu?
• https://github.com/angular-ui/bootstrap/issues/331

akıllı tablo ile ilgili olarak açısal versiyonunuz için hazır olup olmadığını kontrol etmeniz gerektiğini lütfen unutmayın

Kendo ızgarası Wijmo kadar iyidir. Kendo'nun veri kaynağı için Açısal bağlamalar ile geldiğini biliyorum ve Wijmo'nun bir Açısal eklentisi olduğunu düşünüyorum. Ama ikisi de özgür değil.