根据Jqgrid另一列中的id值获取Jqgrid的一列中图像

Question

我有一个JQGrid，它有4列，如下所示

<script type="text/javascript">
        $(function(){
            jQuery("#toolbar").jqGrid({
                url:'<%=request.getContextPath()%>/TestServlet?q=1&action=fetchData',
                datatype: "xml",
                mtype: 'POST',
                height: '100%',
                width: '100%',
                colNames:['LocationImage','City','State','LocationID'],
                colModel:[
                    {name:'LocationImage',index:'LocationImage',align: 'center', formatter: imageFormatter},
                    {name:'City',index:'City', width:200,fixed:true,sortable:true,align:'center',editable:true, editoptions:{readonly:false,size:500}},
                    {name:'State',index:'State', width:200,fixed:true,sortable:true,align:'center',editable:true, editoptions:{readonly:false,size:50}},
                    {name:'LocationID',index:'LocationID',width:60,align:'center',hidden:true,editable:false, editoptions:{readonly:true,size:30}
                ],
                paging: true,
                rowNum:16,
                rowTotal:2000,
                rownumbers: true,
                rownumWidth: 25,
                rowList:[16,32,48],
                viewrecords: true,
                loadonce: true,
                gridview: true,
                pager: $("#ptoolbar"),
                sortname: 'Name',
                sortorder: "asc",
                caption: "Test Grid"
            })
            jQuery("#toolbar").jqGrid('navGrid','#ptoolbar',{del:false,add:false,edit:false});
            jQuery("#toolbar").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
        });
        function imageFormatter(el, cval, opts) {
    var num = '2';
            return ("<center><img src='../gd/images/" + num+".png' height='180px' width='180px' /></center>")
        }

在这里，我将num硬编码为"2"，因此在第一列（即LocationImage）中显示2.png，我需要的是num的值应该来自第四列，即LocationID（注意它是隐藏列）。

请让我知道怎么做。

谢谢，Deepna

Answer 1

您应该将imageFormatter函数更改为这样：

function imageFormatter(cellvalue, options, rowObject){     
  var num = $("#" + options.rowId).find("td[aria-describedby='toolbar_LocationID']").text();                
  return "<center><img src='../gd/images/" + num + ".png' height='180px' width='180px' /></center>";
}   

Answer 2

好吧，我不太确定，我现在不能测试。但以下是你可以做的

从options参数中，您可以获取行id，选中此处，然后可以使用getCell或getGridParam获取具有该行id的Location id。并且您可以使用该值来设置图像。

如果这对自定义格式化程序不起作用，您可以在JqGrid的gridComplete属性中使用setCol方法。

现在，这只适用于一个id。如果您想为所有行设置图像，请在变量中使用getDataID方法获取行id，然后使用for循环并使用setCol。

我希望这能帮助

Answer 3

我能够通过以下方式修复问题

1. 将网格中的第一列更改为位置ID
2. 现在在格式化程序中，当我说"cellvalue"时，它实际上返回位置id
3. 然后将此位置id设置为变量num（即num=单元格值）
4. 现在，格式化程序代码将id值替换为基于图像的关于id.png

谢谢，Deepna