表格中的图像格式化程序问题答案

【问题标题】：Issue with image formatter in form表格中的图像格式化程序问题
【发布时间】：2012-08-31 21:05:16
【问题描述】：

我是 jqGrid 的新手，我正在使用 jqGrid-4.4.0 使用 Spring MVC 显示来自 db2 数据库的值。我已经使用格式化程序选项来显示图像，具体取决于其中一列的值，这也可以正常工作。问题是，当我双击要编辑的行而不是从列中获取值时，我得到了图像 html 标记。如何显示我从数据库中获得的实际值？

下面是我用来格式化的函数

function imageFormat( cellvalue, options, rowObject ){
    var img="";
    if(cellvalue==true){
        img= "<img src='"+CONTEXT_ROOT+"/images/icons/Light_Green_Round_16_n_g.gif'  BORDER='0'/>";
    }else{
        img= "<img src='"+CONTEXT_ROOT+"/images/icons/Light_Red_Round_16_n_g.gif'  BORDER='0'/>";
    }
    return img;
}

在 colModel 中我调用了函数

colModel:[
        {name:'idCasePackOptions',hidden:true,editrules:{edithidden:true, required:false}, editable:true},  
        {name:'cypharecommended',index:'cypharecommended', width:170, sorttype:"int", sortable:true, editable:true, edittype:'checkbox', editoptions: { value:"1:0" }},
        {name:'distributorapproved',index:'distributorapproved', width:170, sorttype:"int", edittype:'text', editable:true, sortable:true},
        {name:'height',index:'height', width:100, sorttype:"float", edittype:'text', editable:true,sortable:true},
        {name:'length',index:'length', width:80, align:"right",sorttype:"float", edittype:'text', editable:true, sortable:true},
        {name:'statuscode',index:'statuscode', width:90, align:"right", edittype:'text', editable:true,sorttype:"int", sortable:true, formatter:imageFormat},       
        {name:'weight',index:'weight', width:100,align:"right", edittype:'text', editable:true,sorttype:"float", sortable:true},        
        {name:'width',index:'width', width:100, editable:true, edittype:'text', sorttype:"float",sortable:true}     
    ]

【问题讨论】：

标签： jquery jqgrid jqgrid-formatter

【解决方案1】：

除了您使用的自定义格式化程序之外，您还可以声明unformatter。它的定义和创建非常类似于自定义格式化程序，并遵循以下格式：

function imageUnFormat( cellvalue, options, cell){
    return $('img', cell).attr('src');
}

其中参数如下：

cellvalue - 未格式化的值。

options - 包含行 id 和列模型的对象

cellobject - 一个 JQuery 单元格对象。

然后像格式化程序一样在列模型中声明它：

{name:'statuscode',index:'statuscode', width:90, align:"right", edittype:'text', editable:true,sorttype:"int", 
sortable:true, formatter:imageFormat, unformat:imageUnFormat},

【讨论】：