Google图表表格:编辑单元格 [英] Google Chart Tables: Edit cells

问题描述

是否可以编辑Google图表表格单元格?

Is there a way to edit a google chart table cell?.

我只需要编辑薪水"列中的单元格.然后确认新值不大于最高薪金"列中的值.

I need to edit the cells at the 'Salary' column only. Then verify the new value it's not greater than the value at 'Max Salary' column.

到目前为止，我只能在单击时获得行和列.

So far I been able only to get the row and column when clicked.

这是示例代码.

google.load('visualization', '1', {
    packages: ['table']
});
google.setOnLoadCallback(drawTable);
var row, col;
function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('number', 'Age');
    data.addColumn('number', 'Max Salary');
    data.addRows([
      ['Mike', {
          v: 10000,
          f: '$10,000'
      },
        30,
       50000
      ],
      ['Jim', {
          v: 8000,
          f: '$8,000'
      },
        25,
       50000
      ],
      ['Alice', {
          v: 12500,
          f: '$12,500'
      },
        43,
       50000
      ],
      ['Bob', {
          v: 7000,
          f: '$7,000'
      },
        50,
       50000
      ]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function(){
        selectHandler(table);
    });
    
  function selectHandler(table) {
  var selection = table.getSelection();
  if(selection.length === 0)
      return;

  var cell = event.target; //get selected cell
  row = selection[0].row;
  col = cell.cellIndex;
  document.getElementById('output').innerHTML = "Row: " +  selection[0].row + " Column: " +  cell.cellIndex;
  
}
  
    table.draw(data, {
        showRowNumber: false      
    });  
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
<div id="output"></div>

推荐答案

如果要允许用户编辑单元格，
您可以设置属性contentEditable = true

if you want to allow the user to edit the cell,
you can set attribute contentEditable = true

这将允许用户更改值

然后您可以使用'blur'事件检查最高工资

then you can use the 'blur' event to check against the max salary

以下是一个粗略的工作示例...

following is a rough working example...

google.charts.load('current', {
  packages: ['table']
}).then(function() {
  var row, col;
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('number', 'Age');
  data.addColumn('number', 'Max Salary');
  data.addRows([
    ['Mike', {
        v: 10000,
        f: '$10,000'
      },
      30,
      50000
    ],
    ['Jim', {
        v: 8000,
        f: '$8,000'
      },
      25,
      50000
    ],
    ['Alice', {
        v: 12500,
        f: '$12,500'
      },
      43,
      50000
    ],
    ['Bob', {
        v: 7000,
        f: '$7,000'
      },
      50,
      50000
    ]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  google.visualization.events.addListener(table, 'select', function() {
    selectHandler(table);
  });

  var formatSalary = new google.visualization.NumberFormat({
    pattern: '$#,##0'
  });

  function selectHandler(table) {
    var selection = table.getSelection();
    if (selection.length === 0)
      return;

    var cell = event.target; //get selected cell
    row = selection[0].row;
    col = cell.cellIndex;
    if (cell.cellIndex === 1) {
      cell.contentEditable = true;
      cell.addEventListener('blur', checkSalary);
    }
    table.setSelection([]);
  }

  function checkSalary(sender) {
    var rowIndex = sender.target.parentNode.rowIndex - 1;
    var salary = parseFloat(sender.target.innerHTML);
    var maxSalary = data.getValue(rowIndex, 3);
    if (!isNaN(salary)) {
      if (salary <= maxSalary) {
        sender.target.innerHTML = formatSalary.formatValue(salary);
        document.getElementById('output').innerHTML = 'Salary successfully changed.';
        data.setCell(rowIndex, 1, salary, formatSalary.formatValue(salary));
        drawTable();
      } else {
        sender.target.innerHTML = data.getFormattedValue(rowIndex, 1);
        document.getElementById('output').innerHTML = 'Error: Salary exceeded max.';
      }
    } else {
      document.getElementById('output').innerHTML = 'Error: Salary not a number.';
    }
    sender.target.contentEditable = false;
    sender.target.removeEventListener('blur', checkSalary);
  }

  drawTable();
  function drawTable() {
    table.draw(data, {
      showRowNumber: false
    });
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
<div id="output"></div>

这篇关于Google图表表格:编辑单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！