我需要在jqgrid中显示一个折线图。所以,我遇到了这个question
在这个问题中,我们可以很容易地在jqgrid单元格中显示迷你图。我使用了相同的东西,但它有效 问题是我的是树格。因此,这里只有父节点填充而不是子节点。
这是我的代码
loadComplete: function () {
var ts = this;
if (ts.p.reccount === 0) {
$(this).hide();
emptyMsgDiv.show();
} else {
$(this).show();
emptyMsgDiv.hide();
}
var index = getColumnIndexByName('col_chart');
$('tr.jqgrow td:nth-child('+(index+1)+')').each(function(index, value) {
var ar;
try {
var chartData = [];
var height;
height = $(this.innerHTML.split(','));
for(i=0;i<height.length;i++){
chartData.push(height[i]);
}
ar = chartData;
var largest = Math.max.apply(Math, ar);
if (ar && ar.length>0) {
console.log(ar);
$(this).sparkline(ar,{
type: 'line',
tooltipFormat: "{{y:value}}",});
}
} catch(e) { alert (true);}
});
}
我使用控制台检查一切正常,因为预期只显示图表。
有人可以告诉我这里有什么问题吗?
答案 0 :(得分:1)
我认为sparkline
不会对隐藏节点起作用。我建议您在sparkline
回调或treeGridAfterExpandRow
事件处理程序中调用jqGridTreeGridAfterExpandNode
。如果从服务器动态加载节点,则可能存在另一个问题。在这种情况下,您应该在sparkline
回调或loadComplete
事件中加入jqGridLoadComplete
来电。
更新:您的演示http://jsfiddle.net/adishri22/98yxbjgc/的修改可能如下:https://jsfiddle.net/OlegKi/98yxbjgc/3/
我使用了以下treeGridAfterExpandRow
代码:
treeGridAfterExpandRow: function (options) {
var $self = $(this), p = $self.jqGrid("getGridParam"),
iCol = p.iColByName.sl, item, i, tr, $td, rowid,
idName = p.localReader.id,
children = $self.jqGrid("getNodeChildren", options.item);
for (i = 0; i < children.length; i++) {
item = children[i];
rowid = item[idName];
tr = $self.jqGrid("getGridRowById", rowid);
$td = $.jgrid.getDataFieldOfCell.call(this, tr, iCol);
try {
$td.sparkline($.parseJSON(item.sl));
} catch(e) {}
}
}