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

我无法弄清楚在jqgrid单元格中获得迷你图形渲染的正确方法,并且在我的生活中无法在任何地方找到任何相关的样本。

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

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

插入时单元格的内容为“正在加载”,事件发生后保持不变。 我真的不确定这是否是尝试让这个工作的最佳方式,所以如果有人能帮助我,我将不胜感激。

关于jQuery Sparkline ,我之前没有听说过,但是在Internet上进行简单的搜索就给出了答案。 在我看来,插件的用法非常简单。

第一个问题是从哪里得到我们将显示为迷你图的数据。 我将数组放置为[1,34,3,2,1] ,我们将使用它来将[1,34,3,2,1]初始化为列中的字符串,该列将包含末尾的行。 所以我把"[1,34,3,2,1]"放在相应的单元格中。 然后在loadComplete里面我得到的单元格包含了关于jQuery.parseJSON的数组并调用了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; i0) { $(this).sparkline(ar); } } catch(e) {} }); } }); 
Interesting Posts