En iyi dinamik JavaScript / JQuery Grid [kapalı]


87

JavaScript, JQuery ve HTML ile çalışıyorum. UI Projemin tamamen dinamik. Aşağıdaki özellikleri destekleyen dinamik bir JavaScript / JQuery Grid arıyorum.

Aşağıdaki özellikleri destekleyen iyi görünümlü bir açık kaynak Grid var mı?

  1. Çalışma zamanında ızgaranın bir örneğini oluşturabilmeli ve DOM'a ekleyebilmeliyim.
  2. Sütun şablonlarını destekler (metin kutusu, seçim, onay kutusu veya herhangi bir giriş veya basit metin)
  3. Yeni sütun şablonu oluşturmayı veya gerçek zamanlı olarak mevcut sütun şablonunu değiştirmeyi destekler.
  4. Bir sütunun altında bulunan birkaç giriş kontrolü (örneğin metin kutusu, onay kutusu ..) etkinleştirilebilir ve çok azı devre dışı bırakılabilir .
  5. SetData () 'yı gerçek zamanlı olarak destekler.
  6. Kullanıcı tarafından herhangi bir giriş verisinin değişmesi durumunda olayı destekler.
  7. Bir Satır seçimini desteklemelidir
  8. Tüm ızgarayı oluşturmadan gerçek zamanlı olarak satır ekleyin veya satır desteğini silin.
  9. Sayfalamayı destekler.
  10. Gerçek zamanlı olarak herhangi bir sütuna göre sıralamayı destekler.
  11. Veriler gerçek zamanlı olarak kullanıcıya göre sıralanırsa bir olay tetikler.
  12. Izgara kullanıcı arayüzü gerçekleştirilebilir sütunları desteklemelidir
  13. Otomatik olarak yeniden boyutlandırılabilir (Izgara, ana öğenin boyutuna göre otomatik olarak yeniden boyutlandırılabilirse harika olur)
  14. Kesinlikle iyi belgelere sahiptir.

7
Kendiniz yazın. Tüm bu özellikleri istiyorsanız, bunu kendiniz yapmanız gerekir. Özel çözüm her zaman en iyi çözümdür.
Raynos

28
Bunun her zaman en iyi çözüm olduğundan emin değilim. Demek istediğim - InnoDB kullanmak yerine kendi veritabanı motorumu inşa etmek niyetinde değilim ...
Grim ...

2
@Roynos, kendim birkaç şey yazdım ancak sıralama, yeniden boyutlandırma gibi tüm özellikleri uygulamak için çok fazla zaman harcamam gerekiyor. Bu yüzden bir ızgara kontrolü arıyorum. Hala tüm ızgaraları tek tek değerlendiriyorum.
Somnath

22
@Raynos Bu çok saçma. En iyi çözüm, en düşük maliyetle çalışan çözümdür. Zaten yapılmışsa neden inşa etsin?
richard

@RichardDesLonde haklısın. Benim seçeneğim, mevcut en iyi çözümü seçmek ve ihtiyaçlarınıza göre genişletmektir.
Somnath

Yanıtlar:


42

Bazı yararlılar:

Bedava:

Ücretli:

Bence en iyi girdiler Flexigrid ve jQuery Grid.


Şimdiye kadar jQuery Grid'i sevmeye başladım. trirand.com/blog/jqgrid/jqgrid.html Ama yine de emin değilim. Sizi güncel tutun ...
Somnath

@Somnath - jQuery ızgarası, en mutlu olduğunuz alan mı? Benzer bir ihtiyacım var ve DataTables'ı değerlendiriyorum, ancak satır eklemek (ve bunların sıralama düzeninin bir parçası olmasını sağlamak) iyi çalışmıyor.
MattW

@MattW Evet jQuery Grid'i seviyorum, veri eklemek gerçekten çok kolay. Ayrıca sadece bir bayrak belirleyerek her sütunu sıralanabilir hale getirebilirsiniz. Gereksinimler listem gerçekten büyüktü. Ancak kendim oluşturduğum birkaç şey ve birkaç durumda jQuery Grid kullanıyorum. Ayrıca havalı ve kolay bir API aldı. Bu noktada jQuery Grid'den memnunum. Bu iyi.
Somnath

@Somnath Peki sonunda hangisini seçtin? DataTable başlığı da iyi bir seçenektir. Hangisi en hızlı? Ve hangisi gruplamayı destekliyor?
Vivek Vardhan

Kullanarak im @VivekVardhan trirand.com/blog/jqgrid/jqgrid.html
Somnath

38

http://datatables.net/ deneyebilirsiniz

DataTables, jQuery Javascript kitaplığı için bir eklentidir. Herhangi bir HTML tablosuna gelişmiş etkileşim kontrolleri ekleyecek olan, aşamalı geliştirmenin temellerine dayanan oldukça esnek bir araçtır. Ana Özellikler:

  • Değişken uzunlukta sayfalama
  • Anında filtreleme
  • Veri türü algılamalı çok sütunlu sıralama
  • Sütun genişliklerinin akıllıca işlenmesi
  • Neredeyse tüm veri kaynaklarından verileri görüntüleyin
  • DOM, Javascript dizisi, Ajax dosyası ve sunucu tarafı işleme (PHP, C #, Perl, Ruby, AIR, Gears vb.)
  • Tablo görünüm alanı için kaydırma seçenekleri
  • Tamamen uluslararası hale getirilebilir
  • jQuery UI ThemeRoller desteği
  • Sağlam - 2600'den fazla birim test paketi ile desteklenir
  • Geniş eklenti yelpazesi inc. TableTools, FixedColumns, KeyTable ve daha fazlası
  • Bedava!
  • Durum tasarrufu
  • Gizli sütunlar
  • Tabloların dinamik oluşturulması
  • Ajax otomatik veri yükleme
  • Özel DOM konumlandırma
  • Tek sütun filtreleme
  • Alternatif sayfalama türleri
  • Tahribatsız DOM etkileşimi
  • Sütunları vurgulayarak sıralama
  • Gelişmiş veri kaynağı seçenekleri
  • Kapsamlı eklenti desteği
  • Sıralama, tür algılama, API işlevleri, sayfalandırma ve filtreleme
  • CSS ile tamamen temalandırılabilir
  • Sağlam belgeler
  • 110'dan fazla önceden oluşturulmuş örnek
  • Adobe AIR için tam destek

3
Lütfen temel özellikler için uygun biçimlendirme yapın. Yalnızca kopyala / yapıştır kullanmayın. Kopyaladıktan / yapıştırdıktan sonra bir kez okumak zorunda mısınız?

"Tahribatsız DOM etkileşimi" ne anlama geliyor? Bunun neden yeni veya bir özellik olduğunu ve neyi kapsadığını / garanti ettiğini anlamakta zorlanmak.
John Zabroski

1
@John artık bağlantılı sayfada belirtilmiyor, ancak bu cümleyi web'de ararsanız, "v1.4'teki en büyük değişiklik, tahribatsız DOM etkileşimidir. Bu, DataTables'ın üzerine yazmayacağı anlamına gelir işlevlerini yerine getirmek için tablo öğeleri (gerçek aşamalı geliştirme!), daha ziyade öğeleri hareket ettirir. v1.3'te ve her çizimde tbody için gerekli HTML'yi dinamik olarak oluşturmadan önce, artık durum böyle değil. Hemen avantajı, orijinal tablodaki tüm özniteliklerin (sınıflar vb.)
Korunmasıdır

5
bence özgür bir yazılım değil, mmm, onunla ilgili bir sorun.
David

4
Görünüşe göre bu harika DataTables ızgaraları düzenlenemez ve buna ihtiyacınız varsa - düzenlenebilir sürüm için ödeme yapmanız gerekir: editor.datatables.net/purchase/index
yetanothercoder

8

Dinamik JQuery Grid için önerim aşağıdadır.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

En iyisi:

DataTables , jQuery Javascript kitaplığı için bir eklentidir. Herhangi bir HTML tablosuna gelişmiş etkileşim kontrolleri ekleyecek olan, aşamalı geliştirmenin temellerine dayanan oldukça esnek bir araçtır.

Değişken uzunlukta sayfalama

Anında filtreleme

Veri türü algılamalı çok sütunlu sıralama

Sütun genişliklerinin akıllıca işlenmesi

Neredeyse tüm veri kaynaklarından verileri görüntüleyin

DOM, Javascript dizisi, Ajax dosyası ve sunucu tarafı işleme (PHP, C #, Perl, Ruby, AIR, Gears vb.)

Tablo görünüm alanı için kaydırma seçenekleri

Tamamen uluslararası hale getirilebilir

jQuery UI ThemeRoller desteği

Sağlam - 2600'den fazla birim test paketi ile desteklenir

Geniş eklenti yelpazesi inc. TableTools, FixedColumns, KeyTable ve daha fazlası

Tabloların dinamik oluşturulması

Ajax otomatik veri yükleme

Özel DOM konumlandırma

Tek sütun filtreleme

Alternatif sayfalama türleri

Tahribatsız DOM etkileşimi

Sütunları vurgulayarak sıralama

Gelişmiş veri kaynağı seçenekleri

Kapsamlı eklenti desteği

Sıralama, tür algılama, API işlevleri, sayfalandırma ve filtreleme

CSS ile tamamen temalandırılabilir

Sağlam belgeler

110'dan fazla önceden oluşturulmuş örnek

Adobe AIR için tam destek


5

Agiletoolkit.org'a bir göz atın, çünkü bu, kutunun 2,4,6,7,9,10 ve 12'sini destekleyen, kullanımı kolay bir CRUD'ye sahiptir (veri eklerken, silerken ızgarayı savunmak için Ajax kullanır ve jquery.

Bazı örnekler yayınlardım ama şu anda bir iPad'de.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.