Tabulator表格锁定/解锁切换功能异常：SVG图标切换与按钮禁用逻辑故障排查

嘿，我仔细扒了你的代码，发现几个关键问题导致锁定/解锁功能失效，咱们一步步捋清楚解决：

问题1：SVG图标初始显示状态混乱 #

你的两个SVG图标在页面加载时没设置初始display属性，导致锁定和解锁图标同时显示，视觉上乱糟糟的，而且切换逻辑的初始状态也没起作用。

问题2：table变量未定义 #

代码里调用了table.updateOptions()，但你根本没在当前作用域里定义table变量——这会直接抛出ReferenceError，打断整个toggleLock函数的执行，导致按钮状态切换、图标切换、光标样式更新这些后续逻辑全跑不起来。

问题3：SVG图标尺寸缺少单位 #

lock-icon的style里width:24; height:24没加px单位，可能导致图标显示异常，甚至看不到。

修复步骤与完整代码 #

1. 修正HTML中的SVG初始状态与尺寸

给unlock-icon加上display:none的初始样式，同时给lock-icon补上px单位：

<div class="table-controls">
  <button id="add-row">Add Row</button>
  <button id="del-row">Delete Row</button>
  <button id="saveChanges">Save Changes</button>
  <button id="highlightButton">Highlight</button>
  <button id="remove-highlight">Remove Highlight</button>
  <button id="remove-font-style">Remove Text Color</button>
  <button id="lock-toggle" style="cursor: pointer;">
    <svg id="lock-icon" style="width:24px; height:24px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M295.424 831.36512h450.56a20.48 20.48 0 0 0 20.48-20.48v-350.4128a20.48 20.48 0 0 0-20.48-20.48h-9.70752v-51.36384c-1.26976-117.248-97.95584-212.62336-215.552-212.62336-117.94432 0-214.6304 95.66208-215.57248 213.4016v50.5856h-9.70752a20.48 20.48 0 0 0-20.48 20.48v350.4128a20.43904 20.43904 0 0 0 20.45952 20.48z m430.08-40.96h-409.6v-309.4528h409.6v309.4528zM346.09152 389.57056c0.75776-95.17056 79.07328-172.60544 174.61248-172.60544 95.25248 0 173.58848 77.2096 174.592 172.01152v51.01568H346.07104l0.02048-50.42176z" fill="#004F6E" />
        <path d="M476.01664 721.69472a20.48 20.48 0 0 0 20.48 20.48h48.37376a20.48 20.48 0 0 0 20.48-20.48v-66.17088a70.73792 70.73792 0 0 0 26.64448-55.1936 71.33184 71.33184 0 0 0-142.62272 0c0 21.62688 9.95328 41.82016 26.64448 55.1936v66.17088z m44.68736-151.552a30.3104 30.3104 0 0 1 30.35136 30.208c0 10.87488-6.10304 20.97152-15.95392 26.3168a20.48 20.48 0 0 0-10.69056 17.98144v56.56576h-7.41376v-56.56576c0-7.49568-4.096-14.41792-10.69056-17.98144a30.1056 30.1056 0 0 1-15.95392-26.3168 30.28992 30.28992 0 0 1 30.35136-30.208z" fill="#004F6E" />
    </svg>
    <svg id="unlock-icon" style="display:none; width:24px; height:24px; vertical-align: middle;" fill="#004F6E" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
        <g id="SVGRepo_iconCarrier"> 
          <g> 
            <g> 
              <path d="M409.6,204.8h-256V128c0-56.559,45.841-102.4,102.4-102.4S358.4,71.441,358.4,128H384C384,57.421,326.579,0,256,0 S128,57.421,128,128v76.8h-25.6c-14.14,0-25.6,11.46-25.6,25.6v256c0,14.14,11.46,25.6,25.6,25.6h307.2 c14.14,0,25.6-11.46,25.6-25.6v-256C435.2,216.26,423.74,204.8,409.6,204.8z M409.6,486.4H102.4v-256h307.2V486.4z"></path> 
            </g> 
          </g> 
          <g> 
            <g> 
              <path d="M256,307.2c-21.171,0-38.4,17.229-38.4,38.4c0,16.666,10.735,30.737,25.6,36.045V422.4h25.6v-40.755 c14.865-5.299,25.6-19.379,25.6-36.045C294.4,324.429,277.171,307.2,256,307.2z M256,358.4c-7.066,0-12.8-5.734-12.8-12.8 c0-7.066,5.734-12.8,12.8-12.8c7.066,0,12.8,5.734,12.8,12.8C268.8,352.666,263.066,358.4,256,358.4z"></path> 
            </g> 
          </g> 
        </g>
    </svg>
  </button>
</div>

2. 修正JS代码：定义table变量并确保作用域正确

你需要在DOMContentLoaded回调里初始化Tabulator表格，把table变量放在回调的局部作用域里，确保toggleLock能访问到它：

document.addEventListener('DOMContentLoaded', function() {
  let isLocked = true;
  // 替换#your-table-id为你实际的表格容器ID，填写你的表格配置
  let table = new Tabulator('#your-table-id', {
    editable: false,
    selectable: false,
    // 其他表格配置项...
  });

  function toggleLock() {
    const lockIcon = document.getElementById('lock-icon');
    const unlockIcon = document.getElementById('unlock-icon');

    if (isLocked) {
      lockIcon.style.display = 'inline';
      unlockIcon.style.display = 'none';
    } else {
      lockIcon.style.display = 'none';
      unlockIcon.style.display = 'inline';
    }

    const buttons = [
      document.getElementById('add-row'),
      document.getElementById('del-row'),
      document.getElementById('saveChanges'),
      document.getElementById('highlightButton'),
      document.getElementById('remove-highlight'),
      document.getElementById('remove-font-style')
    ];

    // 过滤掉可能不存在的按钮，避免报错
    buttons.forEach(button => {
      if (button) button.disabled = isLocked;
    });

    // 确保table存在再调用更新方法
    if (table) {
      table.updateOptions({
        editable: !isLocked,
        selectable: !isLocked
      });
    }

    document.body.style.cursor = isLocked ? 'not-allowed' : 'default';
  }

  // 初始化锁定状态
  toggleLock();

  document.getElementById('lock-toggle').addEventListener('click', function() {
    isLocked = !isLocked;
    toggleLock();
  });
});

额外小建议 #

• 打开浏览器开发者工具（F12）的Console标签页，看看有没有报错信息——这是排查JS问题最直接的方式。
• 如果某些按钮可能不存在，遍历按钮时加个判断（我已经在代码里加上了），避免出现Cannot set property 'disabled' of null的错误。

备注：内容来源于stack exchange，提问作者confusedcoder