如何使用复选框在Google可视化表中保留复选框状态

Question

我正在使用谷歌可视化表并在列表中添加复选框。我想选中带复选框的行，并对这些选定的行执行一些操作。但是，当调用sort或page事件时，表格会重新绘制，并且复选框将取消选中。

Here is the fiddle

如何在表格排序或页面更改后保持复选框状态？

谢谢

Answer 1

在调用事件之前，您可以执行以下操作来保存checked状态的复选框：

  var checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
  var checkboxesState = {};
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("change", function(){
      checkboxesState[this.getAttribute("id")] = this.checked;
    });
  }

调用事件后，恢复它：

    google.visualization.events.addListener(table, 'sort', function(ev) {
       //Needed, since the whole table DOM will change
       checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
          for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxesState[checkboxes[i].getAttribute("id")]){
              checkboxes[i].checked = checkboxesState[checkboxes[i].getAttribute("id")];
            }
          }
    });