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>

并且您的控制器将返回相应的Google图表网址：

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

给出：