Jquery 如何使用迷你图填充jqGrid单元格

我很难找到在jqgrid单元格中获得火花线图渲染的正确方法，我一生都找不到任何相关的示例

无论如何，经过一些研究后，我决定做的事情是尝试在afterRowInsert上向单元格中注入迷你图。不幸的是，我做错了。以下是我正在做的：

        afterInsertRow: function(rowid, rowdata, rowelem) {
            var cell = jQuery('#datapointlist').getCell(rowid, 'Graph');
            $(cell).sparkline([1,34,3,2,1])
        },

插入时单元格的内容为“加载”，事件发生后保持不变。我甚至不确定这是否是让它工作的最佳方式，因此如果有人能帮助我，我将不胜感激。

我以前没有听说过，但在互联网上进行简单搜索就可以给出答案。在我看来，插件的使用非常简单

第一个问题是我们将从哪里获得数据，这些数据将显示为火花线。我放置了类似于

[1,34,3,2,1]

的数组，我们将使用该数组在包含末尾行的列中将小火花初始化为字符串。所以我把

“[1,34,3,2,1]”

放在相应的单元格中。然后在

loadComplete

的内部，我得到包含的单元格，将其转换为数组，并调用

sparkline

。因此，我收到了以下表格：

您可以实时查看网格

下面您可以找到我使用的代码：

var mydata = [
        {id:"1", invdate:"2007-10-01",name:"Microsoft" , sl:"[10,8,5,7,4,4,1]"},
        {id:"2", invdate:"2007-10-02",name:"Google", sl:"[1,34,3,2,1]"},
        {id:"3", invdate:"2007-09-01",name:"IBM", sl:"[10,8,5,7,4,4,1]"},
        {id:"4", invdate:"2007-10-04",name:"Baidu", sl:"[1,34,3,2,1]"},
        {id:"5", invdate:"2007-10-31",name:"Apple", sl:"[10,8,5,7,4,4,1]"},
        {id:"6", invdate:"2007-09-06",name:"Amazon.com", sl:"[1,34,3,2,1]"},
        {id:"7", invdate:"2007-10-04",name:"Nvidia", sl:"[10,8,5,7,4,4,1]"},
        {id:"8", invdate:"2007-10-03",name:"Ebay", sl:"[1,34,3,2,1]"},
        {id:"9", invdate:"2007-09-01",name:"Adobe", sl:"[10,8,5,7,4,4,1]"},
        {id:"10",invdate:"2007-09-08",name:"Yahoo",sl:"[1,34,3,2,1]"},
        {id:"11",invdate:"2007-09-08",name:"BMW",sl:"[1,34,3,2,1]"},
        {id:"12",invdate:"2007-09-10",name:"Mercedes",sl:"[10,8,5,7,4,4,1]"}
    ],
    grid = $("#list"),
    getColumnIndexByName = function(columnName) {
        var cm = grid.jqGrid('getGridParam','colModel');
        for (var i=0,l=cm.length; i<l; i++) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

grid.jqGrid({
    datatype:'local',
    data: mydata,
    colNames:['Inv No','Date','Share',''],
    colModel:[
        {name:'id',index:'id',width:70,align:'center',sorttype: 'int'},
        {name:'invdate',index:'invdate',width:100, align:'center', sorttype:'date',
         formatter:'date', formatoptions: {newformat:'d-M-Y'}, datefmt: 'd-M-Y'},
        {name:'name',index:'name', width:200},
        {name:'sl',index:'sl',width:50,align:'center',sortable:false}
    ],
    rowNum:10,
    rowList:[5,10,20],
    pager: '#pager',
    gridview:true,
    rownumbers:true,
    sortname: 'invdate',
    viewrecords: true,
    sortorder: 'desc',
    caption:'Example of usage of jQuery Sparklines',
    height: '100%',
    loadComplete: function () {
        var index = getColumnIndexByName('sl');
        $('tr.jqgrow td:nth-child('+(index+1)+')').each(function(index, value) {
            var ar;
            try {
                ar = $.parseJSON($(this).text());
                if (ar && ar.length>0) {
                    $(this).sparkline(ar);
                }
            } catch(e) {}
        });
    }
});

var mydata=[
{id:“1”，invdate:“2007-10-01”，name:“Microsoft”，sl:“[10,8,5,7,4,4,1]”，
{id:“2”，invdate:“2007-10-02”，name:“Google”，sl:[1,34,3,2,1]”，
{id:“3”，invdate:“2007-09-01”，name:“IBM”，sl:“[10,8,5,7,4,4,1]”，
{id:“4”，invdate:“2007-10-04”，name:“百度”，sl:[1,34,3,2,1]”，
{id:“5”，invdate:“2007-10-31”，name:“Apple”，sl:“[10,8,5,7,4,4,1]”，
{id:“6”，invdate:“2007-09-06”，name:“Amazon.com”，sl:“[1,34,3,2,1]”，
{id:“7”，invdate:“2007-10-04”，姓名：“Nvidia”，sl:“[10,8,5,7,4,4,1]”，
{id:“8”，invdate:“2007-10-03”，name:“Ebay”，sl:[1,34,3,2,1]”，
{id:“9”，invdate:“2007-09-01”，name:“Adobe”，sl:[10,8,5,7,4,4,1]”，
{id:“10”，invdate:“2007-09-08”，name:“Yahoo”，sl:[1,34,3,2,1]”，
{id:“11”，invdate:“2007-09-08”，name:“BMW”，sl:[1,34,3,2,1]”，
{id:“12”，invdate:“2007-09-10”，name:“Mercedes”，sl:“[10,8,5,7,4,4,1]”
],
网格=$（“#列表”），
getColumnIndexByName=函数（columnName）{
var cm=grid.jqGrid（'getGridParam'，'colModel'）；
对于（变量i=0，l=cm.length；i0）{
$（本图）。闪光（ar）；
}
}捕获（e）{}
});
}
});

我使用了相同的方法，但在我的例子中，树网格中的叶节点没有显示图形，我在这里问了一个问题。你能调查一下吗