Google DataTable - 更新单元格并显示答案

【问题标题】：Google DataTable - Update cell and displayGoogle DataTable - 更新单元格并显示
【发布时间】：2015-04-07 01:04:06
【问题描述】：

我在更新 Google DataTable 中的单元格和让显示反映更改时遇到问题。现在，我的解决方案是重新绘制表格，但它会打乱页面滚动以及用户在表格中的位置。

知道我错过了什么吗？感谢您的帮助。

【问题讨论】：

标签： google-visualization google-datatable

【解决方案1】：

你用过setCell函数吗？下面的代码提供了一个按钮来更改表中的名称之一。如果用户单击某一行以突出显示它，它不会更改滚动位置或突出显示哪一行。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["table"]});
      google.setOnLoadCallback(drawTable);
      var table;
      var data;

      function drawTable() {
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true],
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true],
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true],
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true});
      }

      function changeCell() {
          data.setCell(1, 0, 'Changed Name');
          table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
    <button onclick="changeCell()">Change</button>
  </body>
</html>

【讨论】：

谢谢。这正是我正在做的。