Showing sparkine in tree jqgrid

问题:

I need to show a line graph inside a jqgrid. So, I come across this question

Here in this question, it is shown how easily we can show sparkline graph in jqgrid cell. I used the same thing and it worked but the problem is mine is a tree grid. So, here only parent node are populating not the child nodes.

This is my code

 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);}
                });
            } 

I checked by using console everything is working fine as expected only chart is not shown.

Can anyone please tell me what is wrong here?

回答1:

I suppose that sparkline don't work on hidden nodes. I'd suggest you to call sparkline inside of treeGridAfterExpandRow callback or jqGridTreeGridAfterExpandNode event handler. Another possible problem could exist if you loads the nodes dynamically from the server. In the case you should include call of sparkline inside of loadComplete callback or jqGridLoadComplete event.

UPDATED: The modification of your demo http://jsfiddle.net/adishri22/98yxbjgc/ could be the following: https://jsfiddle.net/OlegKi/98yxbjgc/3/

I used the following code of 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) {}
    }
}