如何在Google Web应用中结合Tabulator实现Materialize模态框

1. 定义Materialize模态框结构 #

先在页面中添加两个静态模态框，分别对应两种状态切换场景：

<!-- 可用转不可用模态框（带备注输入） -->
<div id="to-unavailable-modal" class="modal">
  <div class="modal-content">
    <h4>标记设备为不可用</h4>
    <p>请填写状态备注：</p>
    <input type="text" id="unavailable-note" placeholder="例如：维修中、已借出">
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close btn-flat">取消</a>
    <a href="#!" id="confirm-unavailable" class="btn">确认</a>
  </div>
</div>

<!-- 不可用转可用模态框 -->
<div id="to-available-modal" class="modal">
  <div class="modal-content">
    <h4>标记设备为可用</h4>
    <p>确认将此设备恢复为可用状态？</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close btn-flat">取消</a>
    <a href="#!" id="confirm-available" class="btn">确认</a>
  </div>
</div>

2. 初始化Materialize模态框 #

页面加载完成后初始化模态框，确保组件能正常触发：

document.addEventListener('DOMContentLoaded', function() {
  const modalElems = document.querySelectorAll('.modal');
  M.Modal.init(modalElems);
});

3. 配置Tabulator单元格点击事件 #

在状态列的cellClick回调中，根据当前设备状态触发对应模态框，同时保存当前设备的唯一标识（比如设备ID），方便后续更新：

const inventoryTable = new Tabulator("#your-table-id", {
  columns: [
    // 其他列配置...
    {
      title: "设备状态",
      field: "status",
      formatter: cell => {
        // 自定义状态显示样式（可选）
        return cell.getValue() === "Available" 
          ? '<span class="green-text">可用</span>' 
          : '<span class="red-text">不可用</span>';
      },
      cellClick: (e, cell) => {
        const currentStatus = cell.getValue();
        const deviceId = cell.getRow().getData().id; // 假设数据中包含唯一ID字段
        
        // 暂存当前操作的设备ID，供模态框确认时使用
        window.activeDeviceId = deviceId;

        // 根据状态选择对应模态框并打开
        const targetModalId = currentStatus === "Available" 
          ? "to-unavailable-modal" 
          : "to-available-modal";
        const modalInstance = M.Modal.getInstance(document.getElementById(targetModalId));
        modalInstance.open();
      }
    }
  ],
  // 其他Tabulator配置...
});

4. 处理模态框确认逻辑 #

为两个确认按钮绑定事件，完成状态修改并同步到Google表格：

// 处理「标记为不可用」的确认操作
document.getElementById('confirm-unavailable').addEventListener('click', () => {
  const note = document.getElementById('unavailable-note').value;
  const deviceId = window.activeDeviceId;

  // 调用Google Apps Script接口更新表格数据
  // google.script.run.updateDeviceStatus(deviceId, "Not Available", note);

  // 同步更新Tabulator表格数据
  inventoryTable.updateData([{id: deviceId, status: "Not Available", note: note}]);

  // 关闭模态框并清空输入框
  const modal = M.Modal.getInstance(document.getElementById('to-unavailable-modal'));
  modal.close();
  document.getElementById('unavailable-note').value = "";
});

// 处理「标记为可用」的确认操作
document.getElementById('confirm-available').addEventListener('click', () => {
  const deviceId = window.activeDeviceId;

  // 调用Google Apps Script接口更新表格数据
  // google.script.run.updateDeviceStatus(deviceId, "Available", "");

  // 同步更新Tabulator表格数据
  inventoryTable.updateData([{id: deviceId, status: "Available", note: ""}]);

  // 关闭模态框
  const modal = M.Modal.getInstance(document.getElementById('to-available-modal'));
  modal.close();
});

关键注意事项 #

• 确保已正确引入Materialize的CSS和JS文件
• 调用Google Apps Script接口时，建议添加回调处理成功/失败场景：

google.script.run
  .withSuccessHandler(() => inventoryTable.setData(google.script.run.getInventoryData))
  .withFailureHandler(err => console.error("更新失败：", err))
  .updateDeviceStatus(deviceId, "Not Available", note);

内容的提问来源于stack exchange，提问作者Borgher