使用AJAX動態添加列到SlickGrid。列不顯示

使用SlickGrid顯示一些相當複雜的網格。我在這裏展示的示例不是我的代碼，但基本上是由SlickGrid人員複製我的問題給出的示例。我的網格需要動態添加列，列名是通過AJAX Feed饋送的。在JS中創建列對象不是一個問題，甚至使用.push來添加它們似乎可以正常工作，因爲我可以在螢幕控制檯中看到它們。新的專欄似乎永遠不會退縮。我在網格的盡頭得到一堆微小的空單元格，但它們從不填充。使用AJAX動態添加列到SlickGrid。列不顯示

以下腳本可以用「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 
     }); 
    }  
}

如果我放線網格=新Slick.Grid（「＃myGrid」，數據，dynamicColumns，選項）;在螢火蟲控制檯中運行它的網格比渲染罰款。幾乎就像腳本仍在執行代碼行，即使它沒有完成創建dynamicColumns。

Digg AJAX調用只是爲了模擬一個AJAX調用，我當然會用我自己的。

來源

2011-03-16 BoxingMyEars

網格在AJAX調用之前得到初始化，以獲得額外的列完成。要麼等到列已加載以初始化網格，要麼在更多列已加載後更新網格：

grid.setColumns(dynamicColumns);

來源

2011-03-17 02:58:22 Tin

使用AJAX動態添加列到SlickGrid。列不顯示

回答

相關問題