2015-03-13 43 views
0

我正在使用jquery appendGrid插件。jquery帶動態數據的AppendGrid

$(function() { 
// Initialize appendGrid 
$('#myTable').appendGrid({ 
    caption: 'Manage Field Specifications', 
    initRows: 1, 
    columns: [ 
      { name: 'SourceField', display: 'Source Field', type: 'text', ctrlAttr: { maxlength: 5 }, ctrlCss: { width: '90px'} } 
     ] 
}); 

myTableData = [ { 「SourceField」: 「SRCFLD1」}];

// Fetch the data to show in the grid; 
$('#myTable').appendGrid('load', myTableData); 

這工作正常,如果我提供「myTableData」中的硬編碼數據。 但是當我從同一頁面的隱藏字段/其他內容中獲取數據時,網格表現出乎意料。

說,myTableData = document.getElementById(「myHiddenDataForTable」).value;

如果我提供這種類型的數據,表的行爲會出乎意料,並顯示出大量添加的空行。

協助我獲取表格的動態數據,並且表格適用於提供的動態數據。

謝謝,

回答

0
$('#myTable').appendGrid({ 
     caption: 'Manage Field Specifications', 
     initRows: 0, 
     columns: [ 
       { name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} }, 
       { name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} }, 
       { name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} }, 
       { name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} }, 
       { name: 'Poster', display: 'With Poster?', type: 'checkbox' }, 
       { name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '50px', 'text-align': 'right' }, value: 0 } 
      ] 
    }); 



    // Prepare demo data 
    var AlbumCount = 0, AlbumData = []; 
    for (var z = 0; z < 500; z++) { 
     AlbumCount++; 
     AlbumData[z] = { 'Album': 'Album ' + AlbumCount, 'Artist': 'Artist ' + AlbumCount, 'Year': 2008 + Math.round(Math.random() * 5), 'Origin': 1 + Math.round(Math.random() * 5), 'Poster': Math.random() > 0.5, 'Price': 100 + Math.round(Math.random() * 1000)/10 }; 
    } 

    // Load data to grid 

    $('#myTable').appendGrid('load', AlbumData); 

請使用示例代碼將數據加載到電網。

+0

感謝Monish回覆。 我能夠通過這種方法提供您建議的數據。 但是,當我與實際應用程序集成時,網頁數據會在頁面加載時被添加。屆時,表格將被初始化並顯示意想不到的結果。 請建議我將實時/動態數據發送到電網。 謝謝, Sen – SenPbu 2015-03-17 05:23:05