jqGrid和Google Chart API

Question

是否可以使用Google Chart API或任何其他图形将图添加到jqGrid的一列？如果可能的话，怎么样？我需要过滤jqGrid的每一行，并在jqGrid的最后一列中显示该特定行的图形。

Answer 1

你可以使用自定义格式：

<script type="text/javascript"> 
    $(function() { 
     $('#myGrid').jqGrid({ 
      url: '@Url.Action("Data")', 
      datatype: 'json', 
      colNames: [ 'Foo', 'Bar', 'Chart' ], 
      colModel: [ 
       { name: 'foo', index: 'foo' }, 
       { name: 'bar', index: 'bar' }, 
       { name: 'chart', index: 'chart', formatter: chartFormatter }, 
      ] 
     }); 
    }); 

    function chartFormatter(el, cval, opts) { 
     return '<img src="' + el + '" alt="chart" title="" />'; 
    } 
</script> 

<div style="height: 500px;"> 
    <table id="myGrid"></table> 
</div> 

和您的控制器将返回相应的谷歌图的网址：

public ActionResult Data() 
{ 
    return Json(new 
    { 
     rows = new[] 
     { 
      new { id = 1, cell = new[] { "foo 1", "bar 1", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } }, 
      new { id = 2, cell = new[] { "foo 2", "bar 2", "https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World" } }, 
     } 
    }, JsonRequestBehavior.AllowGet); 
} 

这给：