我无法找出在 jqgrid 单元格中渲染迷你图的正确方法,而且我一生都无法在任何地方找到任何相关示例。
无论如何,经过一些研究,我决定要做的事情是尝试将迷你图注入(inject) afterRowInsert 上的单元格中。不幸的是我做错了。这是我正在做的事情:
afterInsertRow: function(rowid, rowdata, rowelem) {
var cell = jQuery('#datapointlist').getCell(rowid, 'Graph');
$(cell).sparkline([1,34,3,2,1])
},
插入时单元格的内容为“正在加载”,并且在事件发生后它保持不变。我什至不确定这是否是尝试使其正常工作的最佳方法,因此如果有人可以帮助我,我将不胜感激。
最佳答案
我之前没有听说过 jQuery Sparkline ,不过在网上简单搜索一下就给出了答案。在我看来,插件的使用非常简单。
第一个问题是我们从哪里获取将显示为迷你图的数据。我放置了像 [1,34,3,2,1]
这样的数组,我们将使用它来将迷你图初始化为列中的字符串,该列将包含末尾的行。所以我将 "[1,34,3,2,1]"
放在相应的单元格中。然后在 loadComplete
内部我得到单元格包含将其转换为关于 jQuery.parseJSON 的数组并调用迷你图。结果我收到了以下网格:
您可以实时看到网格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) {}
});
}
});
关于jquery - 如何使用迷你图填充 jqGrid 单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5426352/