Web Components 中如何实现可编辑表格组件-JavaScript中文网-JavaScript教程资源分享门户

前言

Web Components 是一种用于创建可重用组件的技术，它由四个不同的技术组成：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。Web Components 的出现使得开发者可以更加方便地创建和复用组件，同时也提高了组件的可维护性和可扩展性。

本文将介绍如何使用 Web Components 实现可编辑表格组件，让用户可以方便地编辑表格中的数据。

实现思路

要实现可编辑表格组件，我们需要考虑以下几个方面：

表格的数据存储：我们需要将表格中的数据存储到组件内部，以方便后续的编辑和保存操作。
表格的显示：我们需要将数据显示在表格中，并且需要支持编辑操作。
数据的编辑：我们需要支持对表格中的数据进行编辑，并将修改后的数据保存到组件内部。
数据的保存：我们需要支持将修改后的数据保存到组件内部，并且可以将数据传递给外部组件或后端服务。

基于以上需求，我们可以将可编辑表格组件分为三个部分：

数据存储部分：用于存储表格中的数据。
数据显示部分：用于将数据显示在表格中，并支持编辑操作。
数据保存部分：用于将修改后的数据保存到组件内部，并将数据传递给外部组件或后端服务。

下面将详细介绍如何实现这三个部分。

数据存储部分

数据存储部分主要用于存储表格中的数据，我们可以使用一个数组来存储表格中的每一行数据，每一行数据是一个对象，包含表格中每一列的数据。

class EditableTable extends HTMLElement {
  constructor() {
    super();
    this.data = [];
  }
}

数据显示部分

数据显示部分主要用于将数据显示在表格中，并支持编辑操作。我们可以使用 HTML 的 table 元素来实现表格的显示，然后使用 JavaScript 动态生成表格中的每一行和每一列，并将数据填充到表格中。

// javascriptcn.com 代码示例
class EditableTable extends HTMLElement {
  constructor() {
    super();
    this.data = [];
    this.table = document.createElement('table');
    this.appendChild(this.table);
  }

  connectedCallback() {
    // 根据数据生成表格
    this.renderTable();
  }

  renderTable() {
    // 生成表头
    const headerRow = document.createElement('tr');
    this.table.appendChild(headerRow);
    for (let i = 0; i < this.columns.length; i++) {
      const headerCell = document.createElement('th');
      headerCell.textContent = this.columns[i].title;
      headerRow.appendChild(headerCell);
    }

    // 生成表格数据
    for (let i = 0; i < this.data.length; i++) {
      const row = document.createElement('tr');
      this.table.appendChild(row);
      for (let j = 0; j < this.columns.length; j++) {
        const cell = document.createElement('td');
        const value = this.data[i][this.columns[j].key];
        cell.textContent = value;
        row.appendChild(cell);
      }
    }
  }
}

我们可以在表格中添加一个编辑按钮，当用户点击编辑按钮时，表格将进入编辑模式，用户可以修改表格中的数据。在编辑模式下，表格中的每个单元格都将变成一个可编辑的文本框，用户可以在文本框中输入新的数据。

// javascriptcn.com 代码示例
class EditableTable extends HTMLElement {
  constructor() {
    super();
    this.data = [];
    this.table = document.createElement('table');
    this.appendChild(this.table);
  }

  connectedCallback() {
    // 根据数据生成表格
    this.renderTable();
  }

  renderTable() {
    // 生成表头
    const headerRow = document.createElement('tr');
    this.table.appendChild(headerRow);
    for (let i = 0; i < this.columns.length; i++) {
      const headerCell = document.createElement('th');
      headerCell.textContent = this.columns[i].title;
      headerRow.appendChild(headerCell);
    }

    // 生成表格数据
    for (let i = 0; i < this.data.length; i++) {
      const row = document.createElement('tr');
      this.table.appendChild(row);
      for (let j = 0; j < this.columns.length; j++) {
        const cell = document.createElement('td');
        const value = this.data[i][this.columns[j].key];
        cell.textContent = value;
        row.appendChild(cell);

        // 添加编辑按钮
        if (j === this.columns.length - 1) {
          const editButton = document.createElement('button');
          editButton.textContent = '编辑';
          cell.appendChild(editButton);
          editButton.addEventListener('click', () => {
            this.enterEditMode(row);
          });
        }
      }
    }
  }

  enterEditMode(row) {
    const cells = row.querySelectorAll('td');
    for (let i = 0; i < cells.length - 1; i++) {
      const cell = cells[i];
      const value = cell.textContent;
      cell.innerHTML = '';
      const input = document.createElement('input');
      input.type = 'text';
      input.value = value;
      cell.appendChild(input);
    }

    const saveButton = document.createElement('button');
    saveButton.textContent = '保存';
    const cancelButton = document.createElement('button');
    cancelButton.textContent = '取消';
    const buttonCell = cells[cells.length - 1];
    buttonCell.innerHTML = '';
    buttonCell.appendChild(saveButton);
    buttonCell.appendChild(cancelButton);

    saveButton.addEventListener('click', () => {
      this.saveChanges(row);
    });

    cancelButton.addEventListener('click', () => {
      this.cancelEdit(row);
    });
  }

  saveChanges(row) {
    const cells = row.querySelectorAll('td');
    const newData = {};
    for (let i = 0; i < cells.length - 1; i++) {
      const cell = cells[i];
      const key = this.columns[i].key;
      const value = cell.querySelector('input').value;
      newData[key] = value;
      cell.innerHTML = value;
    }

    const rowIndex = Array.prototype.indexOf.call(this.table.children, row) - 1;
    this.data[rowIndex] = newData;

    const buttonCell = cells[cells.length - 1];
    buttonCell.innerHTML = '';
    const editButton = document.createElement('button');
    editButton.textContent = '编辑';
    buttonCell.appendChild(editButton);
    editButton.addEventListener('click', () => {
      this.enterEditMode(row);
    });
  }

  cancelEdit(row) {
    const cells = row.querySelectorAll('td');
    for (let i = 0; i < cells.length - 1; i++) {
      const cell = cells[i];
      const value = this.data[rowIndex][this.columns[i].key];
      cell.innerHTML = value;
    }

    const buttonCell = cells[cells.length - 1];
    buttonCell.innerHTML = '';
    const editButton = document.createElement('button');
    editButton.textContent = '编辑';
    buttonCell.appendChild(editButton);
    editButton.addEventListener('click', () => {
      this.enterEditMode(row);
    });
  }
}

数据保存部分

数据保存部分主要用于将修改后的数据保存到组件内部，并将数据传递给外部组件或后端服务。我们可以定义一个 save 方法来保存修改后的数据。

// javascriptcn.com 代码示例
class EditableTable extends HTMLElement {
  constructor() {
    super();
    this.data = [];
    this.table = document.createElement('table');
    this.appendChild(this.table);
  }

  connectedCallback() {
    // 根据数据生成表格
    this.renderTable();
  }

  renderTable() {
    // 生成表头
    const headerRow = document.createElement('tr');
    this.table.appendChild(headerRow);
    for (let i = 0; i < this.columns.length; i++) {
      const headerCell = document.createElement('th');
      headerCell.textContent = this.columns[i].title;
      headerRow.appendChild(headerCell);
    }

    // 生成表格数据
    for (let i = 0; i < this.data.length; i++) {
      const row = document.createElement('tr');
      this.table.appendChild(row);
      for (let j = 0; j < this.columns.length; j++) {
        const cell = document.createElement('td');
        const value = this.data[i][this.columns[j].key];
        cell.textContent = value;
        row.appendChild(cell);

        // 添加编辑按钮
        if (j === this.columns.length - 1) {
          const editButton = document.createElement('button');
          editButton.textContent = '编辑';
          cell.appendChild(editButton);
          editButton.addEventListener('click', () => {
            this.enterEditMode(row);
          });
        }
      }
    }
  }

  enterEditMode(row) {
    const cells = row.querySelectorAll('td');
    for (let i = 0; i < cells.length - 1; i++) {
      const cell = cells[i];
      const value = cell.textContent;
      cell.innerHTML = '';
      const input = document.createElement('input');
      input.type = 'text';
      input.value = value;
      cell.appendChild(input);
    }

    const saveButton = document.createElement('button');
    saveButton.textContent = '保存';
    const cancelButton = document.createElement('button');
    cancelButton.textContent = '取消';
    const buttonCell = cells[cells.length - 1];
    buttonCell.innerHTML = '';
    buttonCell.appendChild(saveButton);
    buttonCell.appendChild(cancelButton);

    saveButton.addEventListener('click', () => {
      this.saveChanges(row);
    });

    cancelButton.addEventListener('click', () => {
      this.cancelEdit(row);
    });
  }

  saveChanges(row) {
    const cells = row.querySelectorAll('td');
    const newData = {};
    for (let i = 0; i < cells.length - 1; i++) {
      const cell = cells[i];
      const key = this.columns[i].key;
      const value = cell.querySelector('input').value;
      newData[key] = value;
      cell.innerHTML = value;
    }

    const rowIndex = Array.prototype.indexOf.call(this.table.children, row) - 1;
    this.data[rowIndex] = newData;

    const buttonCell = cells[cells.length - 1];
    buttonCell.innerHTML = '';
    const editButton = document.createElement('button');
    editButton.textContent = '编辑';
    buttonCell.appendChild(editButton);
    editButton.addEventListener('click', () => {
      this.enterEditMode(row);
    });

    this.save();
  }

  cancelEdit(row) {
    const cells = row.querySelectorAll('td');
    for (let i = 0; i < cells.length - 1; i++) {
      const cell = cells[i];
      const value = this.data[rowIndex][this.columns[i].key];
      cell.innerHTML = value;
    }

    const buttonCell = cells[cells.length - 1];
    buttonCell.innerHTML = '';
    const editButton = document.createElement('button');
    editButton.textContent = '编辑';
    buttonCell.appendChild(editButton);
    editButton.addEventListener('click', () => {
      this.enterEditMode(row);
    });
  }

  save() {
    // 将修改后的数据保存到组件内部
    // 并将数据传递给外部组件或后端服务
    const event = new CustomEvent('save', {
      detail: this.data
    });
    this.dispatchEvent(event);
  }
}

示例代码

下面是一个完整的可编辑表格组件的示例代码。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>可编辑表格组件</title>
</head>
<body>
  <editable-table></editable-table>

  <script>
    class EditableTable extends HTMLElement {
      constructor() {
        super();
        this.data = [
          { id: 1, name: '张三', age: 20 },
          { id: 2, name: '李四', age: 25 },
          { id: 3, name: '王五', age: 30 }
        ];
        this.columns = [
          { key: 'id', title: '编号' },
          { key: 'name', title: '姓名' },
          { key: 'age', title: '年龄' },
          { key: 'action', title: '操作' }
        ];
        this.table = document.createElement('table');
        this.appendChild(this.table);
      }

      connectedCallback() {
        // 根据数据生成表格
        this.renderTable();
      }

      renderTable() {
        // 生成表头
        const headerRow = document.createElement('tr');
        this.table.appendChild(headerRow);
        for (let i = 0; i < this.columns.length; i++) {
          const headerCell = document.createElement('th');
          headerCell.textContent = this.columns[i].title;
          headerRow.appendChild(headerCell);
        }

        // 生成表格数据
        for (let i = 0; i < this.data.length; i++) {
          const row = document.createElement('tr');
          this.table.appendChild(row);
          for (let j = 0; j < this.columns.length; j++) {
            const cell = document.createElement('td');
            const value = this.data[i][this.columns[j].key];
            cell.textContent = value;
            row.appendChild(cell);

            // 添加编辑按钮
            if (j === this.columns.length - 1) {
              const editButton = document.createElement('button');
              editButton.textContent = '编辑';
              cell.appendChild(editButton);
              editButton.addEventListener('click', () => {
                this.enterEditMode(row);
              });
            }
          }
        }
      }

      enterEditMode(row) {
        const cells = row.querySelectorAll('td');
        for (let i = 0; i < cells.length - 1; i++) {
          const cell = cells[i];
          const value = cell.textContent;
          cell.innerHTML = '';
          const input = document.createElement('input');
          input.type = 'text';
          input.value = value;
          cell.appendChild(input);
        }

        const saveButton = document.createElement('button');
        saveButton.textContent = '保存';
        const cancelButton = document.createElement('button');
        cancelButton.textContent = '取消';
        const buttonCell = cells[cells.length - 1];
        buttonCell.innerHTML = '';
        buttonCell.appendChild(saveButton);
        buttonCell.appendChild(cancelButton);

        saveButton.addEventListener('click', () => {
          this.saveChanges(row);
        });

        cancelButton.addEventListener('click', () => {
          this.cancelEdit(row);
        });
      }

      saveChanges(row) {
        const cells = row.querySelectorAll('td');
        const newData = {};
        for (let i = 0; i < cells.length - 1; i++) {
          const cell = cells[i];
          const key = this.columns[i].key;
          const value = cell.querySelector('input').value;
          newData[key] = value;
          cell.innerHTML = value;
        }

        const rowIndex = Array.prototype.indexOf.call(this.table.children, row) - 1;
        this.data[rowIndex] = newData;

        const buttonCell = cells[cells.length - 1];
        buttonCell.innerHTML = '';
        const editButton = document.createElement('button');
        editButton.textContent = '编辑';
        buttonCell.appendChild(editButton);
        editButton.addEventListener('click', () => {
          this.enterEditMode(row);
        });

        this.save();
      }

      cancelEdit(row) {
        const cells = row.querySelectorAll('td');
        for (let i = 0; i < cells.length - 1; i++) {
          const cell = cells[i];
          const value = this.data[rowIndex][this.columns[i].key];
          cell.innerHTML = value;
        }

        const buttonCell = cells[cells.length - 1];
        buttonCell.innerHTML = '';
        const editButton = document.createElement('button');
        editButton.textContent = '编辑';
        buttonCell.appendChild(editButton);
        editButton.addEventListener('click', () => {
          this.enterEditMode(row);
        });
      }

      save() {
        // 将修改后的数据保存到组件内部
        // 并将数据传递给外部组件或后端服务
        const event = new CustomEvent('save', {
          detail: this.data
        });
        this.dispatchEvent(event);
      }
    }

    customElements.define('editable-table', EditableTable);
  </script>
</body>
</html>

总结

本文介绍了如何使用 Web Components 实现可编辑表格组件，包括数据存储、数据显示和数据保存三个部分。通过本文的学习，读者可以了解到 Web Components 的基本使用方法，并掌握如何创建和复用组件，提高组件的可维护性和可扩展性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6579d555d2f5e1655d3f8fb4