用自定义单元格颜色的jqGrid

是否有可能在jqGrid(jQuery网格http://www.trirand.com/blog/)有自定义单元格的文本颜色,例如在价格栏中,如果价格> 100 $,我想要红色,如果价格<50 $,则为绿色,否则为灰色?

更普遍的做

  • jqGrid提供钩子来更改网格单元格视图,例如,当价格列的单元格被创建或修改时,我可以注册一个回调函数。

  • 或者是否有可能有单独的模型和视图(客户端),例如从服务器我可以发送每行两个数据,即如何显示和显示内容

  • 编辑:所以这里是一个示例,显示示例格式化程序,它根据值为单元格着色

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

    是的,你可以这么做。 编写一个自定义格式器。 这只是您在colModel中传递引用的函数。 你得到了函数中最后的单元格选择器的引用,所以你可以用一个格式化程序完成jQuery的任何工作。 包括改变颜色/样式。


    您也可以在colModel中指定类:

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

    如果单元格具有xxx值,我会设置一个红色背景颜色,如果值为yyy,则设置为绿色背景。

    我写了这段代码:

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

    这个函数就像你的例子:

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

    我如何设置它?

    非常感谢。

    链接地址: http://www.djcxy.com/p/31021.html

    上一篇: jqGrid with custom cell colors

    下一篇: Angular 2 and DevExpress