如何使用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) {} 
     }); 
    } 
});