表格中的图像格式化问题

时间:2012-09-07 00:46:40

标签: jquery jqgrid jqgrid-formatter

我是jqGrid的新手,我使用jqGrid-4.4.0使用Spring MVC显示来自db2数据库的值。我已经使用了formatter选项来显示一个图像,具体取决于其中一个列的值也正常工作。问题是,当我双击要编辑的行而不是从列中获取值时,我得到图像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}     
    ]

1 个答案:

答案 0 :(得分: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},