使用AJAX动态地将列添加到SlickGrid.列不显示

Question

使用SlickGrid显示一些非常复杂的网格.我在这里展示的示例不是我的代码,但基本上是由SlickGrid人员复制我的问题给出的示例.我的网格需要动态添加列,列名通过AJAX提要.创建于JS列对象不是一个问题,即使使用.push添加它们是似乎很好地工作,因为我可以在萤火控制台中看到它们.新专栏似乎永远不会出现.我在网格的末尾得到了一堆很小的空单元格,但它们从不填充.

下面的脚本可以替换为此处查看的"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调用,我当然会使用我自己的.

Answer 1

在AJAX调用之前,网格正在初始化,以完成其他列.要等到列已加载以初始化网格,要么在加载其他列之后更新网格:

grid.setColumns(dynamicColumns);