如何分配值在谷歌儀表盤表TR

我使用谷歌儀表板的表的功能，我想ID的值賦給TR所創建的每個行的，我有數組如下如何分配值在谷歌儀表盤表TR

var data = google.visualization.arrayToDataTable([ 
     ['Name', 'Donuts eaten','id'], 
     ['Michael' , 5,'1'], 
     ['Elisa', 7,'2'], 
     ['Robert', 3,'3'], 
     ['John', 2,'4'], 
     ['Jessica', 6,'5'], 
     ['Aaron', 1,'6'], 
     ['Margareth', 8,'7'] 
    ]); 

     var table = new google.visualization.ChartWrapper({ 
        'chartType': 'Table', 
        'containerId': 'chart2', 
        dataTable: data, 
        'options': { 
         'width': '500px' 
        } 
       }); 
       table.draw();

我仍然無法弄清楚是否有某種方法將值綁定到DOM元素，任何幫助將不勝感激。

來源

2013-12-18 noobie-php

讀asgallant的答案，最後的評論。使用插件和幫助來提高或使你自己... :) – Sami

做好自己的事情做特定的工作是很容易的，但如果我們不能修改什麼使用1點，這個表/功能捆綁了Dashoard？因爲已經有太多了。 –

這裏有一個解決方案，使用JQuery：

google.visualization.events.addListener(table, 'ready', function() { 
    $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) { 
     var idx = $('td:nth-child(2)', this).html(); 
     $(this).attr('id', 'row' + idx); 
    }); 
    });

，並刪除ID列：

google.visualization.events.addListener(table, 'ready', function() { 
    $('.google-visualization-table-tr-head td:nth-child(3)').remove(); 
    $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) { 
     var td = $('td:nth-child(2)', this) 
     var idx = td.html(); 
     td.remove(); 
     $(this).attr('id', 'row' + idx); 
    }); 
    });

隨着排序考慮：

function tableCleanUp() { 
    google.visualization.events.addListener(table.getChart(), 'sort', tableCleanUp2); 
    tableCleanUp2(); 
} 

function tableCleanUp2() { 
    $('.google-visualization-table-tr-head td:nth-child(3)').remove(); 
    $('#chart2 .google-visualization-table-tr-odd, #chart2 .google-visualization-table-tr-even').each(function (e) { 
     var td = $('td:nth-child(2)', this) 
     var idx = td.html(); 
     td.remove(); 
     $(this).attr('id', 'row' + idx); 
    }); 
} 

google.visualization.events.addListener(table, 'ready', tableCleanUp);

來源

2013-12-29 14:41:15

Thx for答覆，我試過這個，但它的工作原理，但有限制的ID列，我通過上面的例子只是一個例子，我的意思是它應顯示爲id應該應用爲這樣的事情，他們的方式，你正在做的很好你需要一些列名稱並取其html值並將其分配給「」，限制是我不想將它作爲列val傳遞。 –

那麼你想怎麼傳遞它呢？如果你想從數據數組中分配一個ID，你需要一些方法來識別有問題的行。 –

「我想爲創建的每行的tr指定id的值」正如前面提到的那樣，我讚賞您的解決方案，但是數據數組中的ID是以某種方式發送的，因此它可以分配給TR的ID ，因爲我認爲我們都知道我們通常不會在列中顯示ID，因爲它可以來自數據庫，如果您稍微修改這一點，我肯定會將您的問題標記爲true。 –

-1

最簡單的形式可以如下完成： tr.id = containerId;

來源

2013-12-18 13:38:19 asdasd

以及在哪裏使用它？ ContainerId應該是整個容器的ID，我猜不只是1 TR。 –

表格可視化中不支持將ID分配給tr's。您必須手動解析創建的HTML以適當地設置它們。

來源

2013-12-18 16:24:35 asgallant

又該怎麼辦？可能是可以接受的答案。我已經嘗試過，但沒有成功：（ – Sami

有沒有簡單的方法來做到這一點。你必須解析你的表，以便將表格單元格中的值與DataTable中的值相匹配，以唯一標識一行（如果不行一些行有重複的數據）如果你有一個單獨的單元格，並且每行有一個唯一的鍵值，那麼最簡單的方法是 – asgallant

如果你允許一個無恥的產品插件，我有一個開源的（在GPLv3下授權的）表可視化測試版現在提供的功能超出了默認的Google Table可視化功能 - 包括爲表格元素分配屬性（如id）的功能。您可以在https://github.com/asgallant/gViz中找到它。表格：它是一個測試版產品（閱讀：可能有大量未發現的bug），所以我認爲它不適用於生產環境，但如果我可以得到一些活躍的測試人員，這些bug可能會被破壞快速。 – asgallant

如何分配值在谷歌儀表盤表TR

回答

相關問題