根据网格另一列中的id值获取Jqgrid一列中的图像答案

【问题标题】：Get Images in a column of Jqgrid based on id value in another column of the grid根据网格另一列中的id值获取Jqgrid一列中的图像
【发布时间】：2012-08-22 23:47:47
【问题描述】：

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

<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 的值应该来自第 4 列，即 LocationID（注意它是隐藏列）。

请告诉我该怎么做。

谢谢，迪普纳

【问题讨论】：

如何接受回复？我只能看到反馈选项
我认为不知何故在 UI 中 - 这个网站对 ui 不太友好..:)
如果你发现答案很好，然后点击勾选标记它的答案。

标签： jqgrid get rowid identify

【解决方案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>";
}

【讨论】：

David - 我尝试了这段代码，但 num 返回了 null - 它没有从 LocationID 列中选择值。

【解决方案2】：

好的，我不确定，我现在无法测试。但这是你可以做的

您可以从选项参数中获取行 ID，检查here，然后您可以使用 getCell 或 getGridParam 获取具有该行 ID 的位置 ID。您可以使用此值来设置图像。

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

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

希望对你有帮助

【讨论】：

Piyush - 感谢您将我指向 Formatter 链接，但是我有另一种方法来解决此问题...将解释为答案帖子
也许你可以链接到那个帖子？？

【解决方案3】：

我能够通过以下方式解决问题

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

谢谢，迪普纳

【讨论】：