2012-08-26 16 views
17

SlickGrid'i kullanmaya başladım ve Data View ve Grid (düzenleme etkinken) arasındaki fark konusunda kafam karıştı. Orada belirtilmiş olmasına rağmen, dokümanlarda veri görünümü ile ilgili bir tartışma bulamadım.SlickGrid Veri Görünümü nedir?

Lütfen beni aydınlatınız.

cevap

26

, sadece üç katmandan düşünüyorum: En altta

Grid 
    ---- 
DataView 
    ---- 
    Data 

Eğer ham veri var. Bu sadece eski bir dizi. Dizideki her öğe bir satırlık veriyi (kılavuzda bir satır olarak görüntülenecek şekilde) temsil eder.

DataView veri dizisi okur ve standart yöntemlerle bir çift maruz bırakarak ızgaraya hazır hale getirir. Bu şekilde, ızgara görüntüleme amacıyla veri almak istediğinde, standart yöntemlerden biri ile veri görüşmesinden söz eder.

Kılavuz, görüntü bileşenidir. Tek sorumluluğu, istenen çıktıyı ekranda görüntülemek için gerekli HTML kodunu oluşturmaktır.

ızgara verileri doğrudan erişir olmadı. Sadece veri görüşmesinden bahseder. Bu, veri görünümünün, verileri grup başlıklarını temsil etmek için kullanılan "hayalet" satırları teslim etmek gibi ızgaraya döndürürken hileler yapmasına izin verir. İlginizi çekiyorsa

, Aşağıdaki örnekte sadece SlickGrid ile dataview kullanır ile size gelebilir en basit örnek hakkındadır.

var data = [ 
    { title: "Primer",  rating: "A" }, 
    { title: "Matrix",  rating: "B" }, 
    { title: "Transformers", rating: "C" }, 
]; 
var columns = [ 
    { id: "title", name: "Title", field: "title" }, 
    { id: "rating", name: "Rating", field: "rating" } 
]; 
var options = { 
    enableColumnReorder: false // ... whatever grid options you need 
}; 

var dataView = new Slick.Data.DataView(); 
var grid = new Slick.Grid("#myGrid", dataView, columns, options); 

// wire up model events to drive the grid 
dataView.onRowCountChanged.subscribe(function (e, args) { 
    grid.updateRowCount(); 
    grid.render(); 
}); 
dataView.onRowsChanged.subscribe(function (e, args) { 
    grid.invalidateRows(args.rows); 
    grid.render(); 
}); 

// Feed the data into the dataview 
dataView.setItems(data); 
+0

Özel DataView uygulaması mı yoksa varsayılan DataView'e G/Ç sağlayan ayrı bir model mi yazılmaya karar veriyorum. Herhangi biri özel bir DataView oluşturdu veya gördü mü? Daha önce hiç görmedim ve bir okuma yapmak istiyorum. – SimplGy

+0

veri bir id ihtiyacı veya başka bir hata atacaktır – Ammon

1

DataView ve ya da ızgara ile değiştirmeden verileri filtre sağlar. Görüntüyü ilgili işlevler sağlayan ızgara üzerinde üst üste bindirme olarak düşünebilirsiniz - bazı durumlarda bu işlevleri geliştirir.

Bu yardımcı olur umarım!

10

DataView veri kaynağının üstünde bir soyutlamadır. Verilerin tümü istemcide (yani bir Javascript dizisinde) mevcutsa, DataView, ızgaranın sahip olmadığı birçok kullanışlı özellik sağlayabilir. (Şebekenin bu özelliklerden yoksun olduğu gerçektir.) - SlickGrid, API'sinde modüler tasarım ve veri soyutlamasını özendirirken özü yalın ve basit tutmaya çalışır.)

DataView, verilerinizi alarak ve veri olarak hareket ederek çalışır Orijinal veri diziniz yerine SlickGrid'e iletebileceğiniz sağlayıcı. Örneğin, DataView grubu verilerini yaparsanız, ızgarayı "grup" satırlarının yalnızca normal veri öğeleri olduğunu düşünmesini sağlar, böylece kılavuzun bunlardan haberdar olması gerekmez. DataView, bu öğelerin özel bir görüntüleme ve davranışa sahip olduğunu ve her ikisinin de uygulamalarını sağladığını bildirir. Daha sonra grid ve voila'yı güncellemek için DataView'un onRowCountChanged ve onRowsChanged olaylarını bağlarsınız.

  • Çağrı:

    İşte DataView ızgaraya ekler özelliklerin bir kaba listesi.

  • Sıralama.
  • Ara.
  • Toplamlarla gruplama.
  • Grupları genişletin/daraltın.
  • Çok basit anlamda
+0

Sıralama şebekeye direkt olarak da mümkündür. Örnek: http: //mleibman.github.io/SlickGrid/example/example-multi-column-sort.html –

İlgili konular