Динамическое добавление столбцов в SlickGrid с помощью AJAX.Столбцы не отображаются - PullRequest
Новая
       15

Динамическое добавление столбцов в SlickGrid с помощью AJAX.Столбцы не отображаются

2 голосов
/ 16 марта 2011

Использование 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 = newSlick.Grid ("# myGrid", data, dynamicColumns, параметры);в консоль Firebug и запустить его сетки, чем отдает нормально.Это похоже на то, что скрипт все еще выполняет строки кода, даже если он не завершил создание dynamicColumns.

Вызов AJAX в Digg просто для того, чтобы аналогично вызову AJAX.

1 Ответ

5 голосов
/ 17 марта 2011

Сетка инициализируется перед завершением вызова AJAX для получения дополнительных столбцов.Либо дождитесь загрузки столбцов для инициализации сетки, либо обновите сетку после загрузки дополнительных столбцов: 

grid.setColumns(dynamicColumns);
...