3

jqgrid セルでスパークライン グラフのレンダリングを取得する適切な方法を理解するのに苦労しており、関連するサンプルをどこにも見つけることができません。

とにかく、いくつかの調査の後、afterRowInsert のセルにスパークライン グラフを挿入することを決定しました。残念ながら、私はそれを間違っています。これが私がやっていることです：

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

挿入時のセルの内容は「読み込み中」であり、イベントの後は変更されません。これがこれを機能させるための最良の方法であるかどうかはよくわかりません。誰かが私を助けることができれば、それは大歓迎です。

4

1 に答える 1

7

jQuery Sparklineについては聞いたことがありませんでしたが、インターネットで簡単に検索すると答えが得られます。プラグインの使い方はとても簡単だと思います。

最初の問題は、スパークラインとして表示するデータをどこから取得するかです。[1,34,3,2,1]最後に行を含む列に、スパークラインを文字列として初期化するために使用する配列を配置しました。だから私"[1,34,3,2,1]"は対応するセルに入れました。次に、セルを取得し、それをjQuery.parseJSONloadCompleteに関して配列に変換して呼び出します。その結果、次のグリッドを受け取りました。 sparklineここに画像の説明を入力

ここでグリッドをライブで見ることができます。

以下に、私が使用したコードを示します。

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) {}
        });
    }
});
于 2011-03-24T23:44:52.453 に答える