Question

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

以下脚本可以替换为“example1-simple.html”中查看here的脚本。

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

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

1 个答案: