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>

и ваш контроллер вернет соответствующие URL-адреса Google Chart:

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

, что дает: