jqGrid với màu ô tùy chỉnh

Question

Có thể trong jqGrid (lưới jquery http://www.trirand.com/blog/) để có màu văn bản ô tùy chỉnh hay không, ví dụ: trong cột giá tôi muốn màu đỏ nếu giá> 100 $ và màu xanh lá cây nếu giá < 50 $ khác màu xám?

Tổng quát hơn làm

1. jqGrid cung cấp móc để thay đổi cellview lưới, ví dụ tôi có thể đăng ký một ô gọi lại của các cột giá trị được tạo hoặc sửa đổi.

2. hoặc có thể có mô hình và chế độ xem riêng biệt (phía máy khách) ví dụ: từ máy chủ tôi có thể gửi hai dữ liệu cho mỗi hàng tức là làm thế nào để hiển thị và những gì để hiển thị

Chỉnh sửa: vì vậy đây là một ví dụ cho thấy các định dạng mẫu, mà màu sắc của tế bào dựa trên giá trị

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,}, 
    ... 
], 

Answer 1

Có, bạn có thể làm điều đó. Viết custom formatter. Đây chỉ là một hàm mà bạn chuyển một tham chiếu đến trong colModel của bạn. Bạn nhận được một tham chiếu đến bộ chọn ô cuối cùng trong hàm, vì vậy bất cứ điều gì bạn có thể làm với jQuery bạn có thể làm trong trình định dạng. Bao gồm thay đổi màu/kiểu.

Answer 2

Tôi sẽ đặt màu nền đỏ nếu ô có giá trị xxx, một nền màu xanh lá cây nếu giá trị là yyy.

Tôi đã viết mã này:

..... 
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},   
    ], 
..... 

Và chức năng này giống như ví dụ của bạn:

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

Làm thế nào tôi có để thiết lập nó?

Cảm ơn rất nhiều.

Answer 3

Bạn cũng có thể chỉ định các lớp trong colModel:

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