我无法弄清楚在jqgrid单元格中获得迷你图形渲染的正确方法,并且在我的生活中无法在任何地方找到任何相关的样本.
无论如何,经过一些研究,我决定要做的事情是尝试将sparkline图注入afterRowInsert中的单元格.不幸的是我做错了.这是我在做的事情：
afterInsertRow: function(rowid,rowdata,rowelem) {
var cell = jQuery('#datapointlist').getCell(rowid,'Graph');
$(cell).sparkline([1,34,3,2,1])
},
插入时单元格的内容为“正在加载”,事件发生后保持不变.我真的不确定这是否是尝试让这个工作的最佳方式,所以如果有人能帮助我,我将不胜感激.
解决方法
我之前没有听到过关于
jQuery Sparkline的消息,但在互联网上进行简单的搜索可以得到答案.在我看来,插件的用法非常简单.
第一个问题是从哪里得到我们将显示为迷你图的数据.我将数组放置为[1,1],我们将使用它来将迷你线初始化为列中的字符串,该列将包含末尾的行.所以我把“[1,1]”放在相应的单元格中.然后在loadComplete里面我得到单元格包含将其转换为关于jQuery.parseJSON的数组并调用sparkline.结果我收到了以下网格：
你可以看到网格直播here.
您可以在下面找到我使用的代码：
var mydata = [
{id:"1",invdate:"2007-10-01",name:"Microsoft",sl:"[10,8,5,7,4,1]"},{id:"2",invdate:"2007-10-02",name:"Google",sl:"[1,{id:"3",invdate:"2007-09-01",name:"IBM",{id:"4",invdate:"2007-10-04",name:"Baidu",{id:"5",invdate:"2007-10-31",name:"Apple",{id:"6",invdate:"2007-09-06",name:"Amazon.com",{id:"7",name:"Nvidia",{id:"8",invdate:"2007-10-03",name:"Ebay",{id:"9",name:"Adobe",{id:"10",invdate:"2007-09-08",name:"Yahoo",{id:"11",name:"BMW",{id:"12",invdate:"2007-09-10",name:"Mercedes",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,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,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) {}
});
}
});
