jqGrid

2009-04-20 33 views
6

jqGrid (jquery ızgarası http://www.trirand.com/blog/) özel hücre metin renklerine sahip olması mümkündür. Fiyat sütununda eğer fiyat> 100 $ ve yeşil ise kırmızı isterse fiyat < 50 $ else grey?jqGrid

Daha genel

  1. jqGrid Kılavuz cellview, örneğin değiştirmek için kanca sağlar Fiyat sütununun hücreleri oluşturulduğunda veya değiştirildiğinde bir geri arama kaydedebilirim.

  2. veya ayrı bir model ve görünüm (istemci tarafı) örn. sunucudan i nasıl görüntüleneceğini yani her satır için iki veri gönderebilir ve hangi

Edit görüntülemek için: işte hücre değerine dayalı renkler örnek biçemleyici gösteren bir örnektir

function infractionInFormatter(el, cellval, opts) 
{ 
    $(el).html(cellval).css('color',infraction_color_map[cellval]); 
} 

colModel :[ 
    ... 
    {name:'date', index:'date', width:120, date:true}, 
    {name:'inf_out', index:'inf_out', width:60, formatter:infractionInFormatter,}, 
    ... 
], 

cevap

8

Evet, bunu yapabilirsin. Bir custom formatter yazın. Bu sadece colModel'inizde bir referansı ilettiğiniz bir işlevdir. İşlevdeki son hücre seçiciye bir başvuru alırsınız, böylece jQuery ile yapabileceğiniz her şeyi bir biçimlendiricide yapabilirsiniz. Renk/stil değişikliği dahil.

-1

Hücrenin xxx değeri varsa, kırmızı renkli bir arka plan rengini, yani yyy ise yeşil bir arka plan ayarlayabilirim. senin örnekte olduğu gibi

..... 
colModel:[ 
    {name:'id',index:'id', width:15,hidden:true, align:"center"}, 
    {name:'title',index:'title', width:150, align:"center"}, 
    {name:'start',index:'start', width:350, align:"center", sorttype:"date"}, 
    {name:'fine',index:'fine', width:350, align:"center", sorttype:"date"}, 
    {name:'completed',index:'completed', width:120, align:"center",formatter:infractionInFormatter},   
    ], 
..... 

Ve bu işlevi: Bunu ayarlamak zorunda Nasıl

function infractionInFormatter(el, cellval, opts) 
     { 
      ..... 
     } 

Bu kodu yazmış mı?

Çok teşekkürler.

+1

Bu hiç bir cevap değil. Bir soru sormak isterseniz [here] (http://stackoverflow.com/questions/ask) adresine gidin. – FastTrack

2

Ayrıca colModel sınıfını belirtebilirsiniz:

colModel: [ 
      { 
      name:'field_x', 
      index:'field_x', 
      align: 'left', 
      width: 35, 
      classes: 'cvteste' 
      }, 
      ..... 
      ]