如何使用sparkline图形填充jqGrid单元格

Question

我无法弄清楚在jqgrid单元格中获取sparkline图形渲染的正确方法，并且无法在我的生活中找到任何相关示例。

无论如何，经过一番研究，我决定要做的事情是尝试将sparkline图注入到afterRowInsert的单元格中。不幸的是我做错了。这是我在做什么：

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

插入的单元格的内容是'加载'和事件后，它保持不变。我真的不确定这是否是最好的方式来尝试这种工作，所以如果任何人都可以帮助我，将不胜感激。

Answer 1

我以前没有听说过关于jQuery Sparkline，但在互联网上简单的搜索给出了答案。在我看来，插件的使用非常简单。

第一个问题是我们将从哪里获得我们将显示为sparkline的数据。我放置了像[1,34,3,2,1]这样的数组，我们将用它来初始化sparkline作为列中的一个字符串，它将包含最后的行。所以我将"[1,34,3,2,1]"放在相应的单元格中。然后在loadComplete的内部，我得到的单元格包含将其转换为阵列的jQuery.parseJSON并致电sparkline。因为我收到了以下网格：

您可以看到网格生活here。

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

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