javascript - 如何在谷歌仪表板表中为 TR 赋值

标签 javascript jquery google-visualization google-datatable

我正在使用 Google Dashboard 的表格功能,我想将 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();

我仍然无法弄清楚是否有某种方法可以将值绑定(bind)到 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);

关于javascript - 如何在谷歌仪表板表中为 TR 赋值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20659635/

相关文章:

javascript - 如何仅在第一次加载页面时设置弹出窗口?

javascript - 嵌套集合的 Lodash 映射

c# - 使用Ajax在Json的MVC 4中遇到困难

javascript - 使用jQuery单击元素时获取数据属性的值?

javascript - jQuery - 查找子输入元素是否在没有明确引用其 id 的情况下被检查?

javascript - Vue.JS 数据属性未定义

javascript - 在 1 页而不是 2 页中添加编辑功能

javascript - 如何解决 Google Visualization - Materials Line 中的重叠问题

javascript - Google可视化水平轴标签

php - SQL 查询 MySQL 到 JSON