Question

我无法更新Google DataTable中的单元格，并且显示屏反映了更改。现在，我的解决方案是重绘表格，但它会弄乱页面滚动以及用户在桌面上的位置。

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

Answer 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>

Google DataTable - 更新单元格和显示

1 个答案: