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); 
} 

這給：