Google DataTable - 更新单元格并显示

Question

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

中的位置

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

Answer 1

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

<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: ',000'}, true],
          ['Jim',   {v:8000,   f: ',000'},  false],
          ['Alice', {v: 12500, f: ',500'}, true],
          ['Bob',   {v: 7000,  f: ',000'},  true],
          ['Mike',  {v: 10000, f: ',000'}, true],
          ['Jim',   {v:8000,   f: ',000'},  false],
          ['Alice', {v: 12500, f: ',500'}, true],
          ['Bob',   {v: 7000,  f: ',000'},  true],
          ['Mike',  {v: 10000, f: ',000'}, true],
          ['Jim',   {v:8000,   f: ',000'},  false],
          ['Alice', {v: 12500, f: ',500'}, true],
          ['Bob',   {v: 7000,  f: ',000'},  true],
          ['Mike',  {v: 10000, f: ',000'}, true],
          ['Jim',   {v:8000,   f: ',000'},  false],
          ['Alice', {v: 12500, f: ',500'}, true],
          ['Bob',   {v: 7000,  f: ',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 - 更新单元格并显示

Google DataTable - Update cell and display

google-visualization

google-datatable