在树 jqgrid 中显示 sparkine

Question

我需要在 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);}
                });
            }

我使用控制台进行了检查，一切正常，正如预期的那样，只是没有显示图表。

谁能告诉我这里出了什么问题？

Answer 1

我想 sparkline 不适用于隐藏节点。我建议您在 treeGridAfterExpandRow 回调或 jqGridTreeGridAfterExpandNode 事件处理程序中调用 sparkline。如果您从服务器动态加载节点，则可能存在另一个问题。在这种情况下，您应该在 loadComplete 回调或 jqGridLoadComplete 事件中包含对 sparkline 的调用。

更新：您的演示修改http://jsfiddle.net/adishri22/98yxbjgc/ could be the following: 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) {}
    }
}

在树 jqgrid 中显示 sparkine

Showing sparkine in tree jqgrid

javascript

jquery

jqgrid

sparklines