如何用迷你图填充jqGrid单元格 [英] How can I populate a jqGrid cell with a sparkline graph

问题描述

我在找出在jqgrid单元中获取迷你图的正确方法时遇到了麻烦，而且我一生无法在任何地方找到任何相关样本.

I'm having trouble figure out the proper way to get a sparkline graph rendering in a jqgrid cell and can't for the life of me find any relevant samples anywhere.

无论如何，经过一些研究，我决定要做的事情是尝试将迷你图插入afterRowInsert的单元格中.不幸的是我做错了.这是我在做什么:

Anyway, after some research I decided the thing to do was try injecting the sparkline graph into the cell on afterRowInsert. Unfortunately I am doing it wrong. Here is what I am doing:

        afterInsertRow: function(rowid, rowdata, rowelem) {
            var cell = jQuery('#datapointlist').getCell(rowid, 'Graph');
            $(cell).sparkline([1,34,3,2,1])
        },

插入时单元格的内容为正在加载"，并且在事件发生后它保持不变.我什至不确定这是否是使它正常工作的最佳方法，因此，如果有人可以帮助我，将不胜感激.

The contents of the cell on insertion is 'Loading' and after the event it remains unchanged. I'm not really even sure if this is the best way to try to get this working so if anyone can help me out it would be much appreciated.

推荐答案

我之前从未听说过 jQuery Sparkline ，但通过Internet进行简单搜索即可找到答案.在我看来，该插件的用法非常简单.

I did't hear before about jQuery Sparkline, but simple search in Internet gives the answer. It seems to me the usage of the Plugin is very simple.

第一个问题是从哪里获得显示为迷你图的数据.我将数组放置为[1,34,3,2,1]之类的数组，该数组将用于将迷你图初始化为字符串，该字符串将包含在末尾的行中.因此，我将"[1,34,3,2,1]"放在了相应的单元格中.然后在loadComplete内部，获取包含单元格，并根据 jQuery.parseJSON 并调用sparkline.结果，我收到了以下网格:

The first problem is from where we would get the data which we will show as sparkline. I placed the array like [1,34,3,2,1] which we will use to initialize the sparkline as a string in the column which will contain the lines at the end. So I placed "[1,34,3,2,1]" in the corresponding cell. Then inside of loadComplete I get the cell contain convert it to the array with respect of jQuery.parseJSON and call sparkline. As the result I received the following grid:

您可以在此处看到实时的网格.

You can see the grid live here.

下面您可以找到我使用的代码:

Below you can find the code which I used:

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

这篇关于如何用迷你图填充jqGrid单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！