2

SlickGrid を使用して、かなり精巧なグリッドを表示します。ここで示している例は私のコードではありませんが、基本的には SlickGrid の人々が私の問題を複製した例です。私のグリッドには、AJAX フィードを介して供給される列名を使用して列を動的に追加する必要があります。JS で列オブジェクトを作成することは問題ではなく、.push を使用してそれらを追加しても、firebug コンソールで確認できるように問題なく動作するようです。新しい列はレンダリングされないようです。グリッドの最後に小さな空のセルがたくさん表示されますが、それらは入力されません。

以下のスクリプトは、ここで表示される「example1-simple.html」のスクリプトに置き換えることができます。

<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
    {id:"title", name:"Title", field:"title"},
    {id:"duration", name:"Duration", field:"duration"},
    {id:"%", name:"% Complete", field:"percentComplete"},
    {id:"start", name:"Start", field:"start"},
    {id:"finish", name:"Finish", field:"finish"},
    {id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];

var dynamicColumns = [];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
}; 

$(function() {
    data = [];
    BuildExtraColumnsAJAX();

    for (var i = 0; i < 2000; i++) {
        data[i] = {
            title: "Task " + i,
            duration: "5 days",
            percentComplete: Math.round(Math.random() * 100),
            start: "01/01/2009",
            finish: "01/05/2009",
            effortDriven: (i % 5 == 0)
        };
        for (var x = 0; x < 20; x++) {
            var columnName = "dynamicColumn" + x;
            data[i][columnName] = x;
        }
    }
    //alert("Go Pack Go");
    grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
    $("#myGrid").show();
})

function BuildExtraColumnsAJAX(){
    //dynamicColumns = [];          
    for (var x = 0; x < columns.length; x++){
        dynamicColumns.push(columns[x]);
    }           
    var url = "http://services.digg.com/search/stories?   query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript"; 
    $.jsonp({
        url: url,
        callbackParameter: "callback",
        cache: true, // Digg doesn't accept the autogenerated cachebuster param
        success: onSuccess,
        error: function(){
            alert("BOOM Goes my world");
            }
    });     

 }

 function onSuccess(resp) {
    for (var i = 0; i < resp.stories.length; i++) {
        dynamicColumns.push( {
            id: "dynamicColumn" + i, 
            name: "Dynamic Column" + i,
            field: "dynamicColumn" + i 
        });
    }
 }

 function BuildExtraColumns(){
    dynamicColumns = [];
    for (var x = 0; x < columns.length; x++){
        dynamicColumns.push(columns[x]);
    }
    for (var i = 0; i < 20; i++) {
        dynamicColumns.push( {
            id: "dynamicColumn" + i, 
            name: "Dynamic Column" + i,
            field: "dynamicColumn" + i 
        });
    }       
 }

ライン grid = new Slick.Grid("#myGrid", data, dynamicColumns, options); を配置すると、firebug コンソールでグリッドを実行すると、正常にレンダリングされます。dynamicColumns の作成が完了していなくても、スクリプトがまだコード行を実行しているようです。

Digg AJAX 呼び出しは、AJAX 呼び出しをシミュレートするためのものです。もちろん、私は自分のものを使用します。

4

1 に答える 1

6

追加の列を取得するための AJAX 呼び出しが完了する前に、グリッドが初期化されています。列がロードされてグリッドが初期化されるまで待機するか、追加の列がロードされた後にグリッドを更新します。

grid.setColumns(dynamicColumns);
于 2011-03-17T02:58:22.023 に答える