>我正在使用谷歌仪表板的表格功能,我想将 id 的值分配给创建的每行的 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 元素,任何帮助将不胜感激。
下面是一个使用 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);
表可视化中不支持将 ID 分配给tr
。 您必须手动解析创建的 HTML 才能正确设置它们。
在最简单的形式中,可以按如下方式完成:tr.id = 容器 ID;