JS 组件系列之 bootstrap treegrid 组件封装过程

下面是详细的攻略：

1. 准备工作

在开始封装 treegrid 组件之前，需要先安装所需依赖库，包括 jquery、bootstrap、fontawesome 以及 bootstrap-table。安装命令如下：

npm install jquery bootstrap fontawesome bootstrap-table

2. 定义 HTML 结构

在 HTML 文件中，创建一个表格元素，并为其添加 class 名称 "treegrid-table"，同时在表格中创建每个单元格中的内容和所需的操作按钮。最后，在表格上方创建一个工具栏，包含添加、编辑、删除等操作的按钮。具体代码如下：

<div class="treegrid-toolbar">
  <button class="btn btn-primary btn-add">添加</button>
  <button class="btn btn-info btn-edit">编辑</button>
  <button class="btn btn-danger btn-delete">删除</button>
</div>
<table class="table table-bordered table-hover treegrid-table">
  <thead>
    <tr>
      <th>序号</th>
      <th>节点名称</th>
      <th>父节点</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr class="treegrid-1">
      <td>1</td>
      <td>一级节点1</td>
      <td>-</td>
      <td><button class="btn btn-sm btn-info btn-edit">编辑</button></td>
    </tr>
    <tr class="treegrid-2 treegrid-parent-1">
      <td>2</td>
      <td>二级节点1</td>
      <td>一级节点1</td>
      <td><button class="btn btn-sm btn-info btn-edit">编辑</button></td>
    </tr>
    <tr class="treegrid-3 treegrid-parent-2">
      <td>3</td>
      <td>三级节点1</td>
      <td>二级节点1</td>
      <td><button class="btn btn-sm btn-info btn-edit">编辑</button></td>
    </tr>
    <tr class="treegrid-4 treegrid-parent-1">
      <td>4</td>
      <td>二级节点2</td>
      <td>一级节点1</td>
      <td><button class="btn btn-sm btn-info btn-edit">编辑</button></td>
    </tr>
    <tr class="treegrid-5">
      <td>5</td>
      <td>一级节点2</td>
      <td>-</td>
      <td><button class="btn btn-sm btn-info btn-edit">编辑</button></td>
    </tr>
  </tbody>
</table>

其中，节点序号、节点名称、父节点、节点操作分别占据表格中的四个单元格，并通过 class 名称 "treegrid-*" 表示树形结构的层级关系。同时，在每个节点操作单元格中，添加一个按钮，用于后续的操作。

3. 添加 JS 代码

添加 JS 代码，实现对表格的初始化、事件绑定、数据的增删改查等操作。具体代码如下：

// 导入所需的依赖库
import $ from 'jquery';
import 'bootstrap';
import 'fontawesome';
import 'bootstrap-table';

// 初始化表格
$('.treegrid-table').bootstrapTable({
  columns: [
    {field: 'id', title: '序号'},
    {field: 'name', title: '节点名称'},
    {field: 'pid', title: '父节点'}
  ]
});

// 绑定添加按钮事件
$('.btn-add').click(function() {
  // TODO: 添加节点操作
});

// 绑定编辑按钮事件
$('.btn-edit').click(function() {
  // TODO: 编辑节点操作
});

// 绑定删除按钮事件
$('.btn-delete').click(function() {
  // TODO: 删除节点操作
});

其中，初始化表格通过 bootstrapTable 方法实现，并传入包含 "序号"、"节点名称"、"父节点" 列信息的 columns 数组。绑定添加、编辑、删除按钮事件的操作，则分别通过 click 方法实现，并调用添加、编辑、删除节点的函数。

4. 实现添加节点功能

在添加节点操作中，需要获取用户输入的节点信息，并根据输入的信息创建一个新节点，最后将新节点添加到表格中。具体代码如下：

// 添加节点函数
function addNode() {
  const name = prompt('请输入节点名称');
  const pid = prompt('请输入父节点编号，如果没有父节点，请输入 "-"');

  if (name && pid) {
    const lastNode = $('.treegrid-table tbody tr').last();
    const id = lastNode.hasClass('treegrid-parent-1') ? lastNode.attr('data-id') * 100 + 1 : parseInt(lastNode.attr('data-id')) + 1;
    const cls = pid === '-' ? '' : `treegrid-parent-${pid}`;

    $('.treegrid-table tbody').append(`
      <tr class="treegrid-${id} ${cls}" data-id="${id}" data-pid="${pid}">
        <td>${id}</td>
        <td>${name}</td>
        <td>${pid}</td>
        <td><button class="btn btn-sm btn-info btn-edit">编辑</button></td>
      </tr>
    `);

    $('.treegrid-table').treegrid();
    alert('添加节点成功');
  } else {
    alert('节点名称和父节点编号不能为空');
  }
}

// 绑定添加按钮事件
$('.btn-add').click(function() {
  addNode();
});

在函数中，首先使用 prompt 对话框获取用户输入的节点名称和父节点编号，如果用户输入了有效的节点信息，则根据该信息动态创建一个新的 tr 元素，设置它的 class、data-id 和 data-pid 属性，并将其添加到表格的 tbody 中。最后，调用 treegrid 方法，对表格进行树形结构的渲染，并提示用户添加节点成功。

5. 实现编辑节点功能

在编辑节点操作中，需要获取用户选择的节点信息，并根据选择的节点编号，将之前的节点信息替换为用户编辑后的新节点信息。具体代码如下：

// 编辑节点函数
function editNode() {
  const checkedNodes = $('.treegrid-table').bootstrapTable('getSelections');

  if (checkedNodes.length === 1) {
    const id = checkedNodes[0].id;
    const name = prompt('请输入新节点名称', checkedNodes[0].name);
    const pid = prompt('请输入新节点父节点编号', checkedNodes[0].pid);

    if (name && pid) {      
      $(`.treegrid-table .treegrid-${id}`).attr('data-pid', pid);
      $(`.treegrid-table .treegrid-${id} td:nth-child(2)`).text(name);
      $(`.treegrid-table .treegrid-${id} td:nth-child(3)`).text(pid);
      alert('编辑节点成功');
    } else {
      alert('节点名称和父节点编号不能为空');
    }
  } else {
    alert('请选择一个节点进行编辑');
  }
}

// 绑定编辑按钮事件
$('.btn-edit').click(function() {
  editNode();
});

在函数中，首先通过 bootstrapTable 的 getSelections 方法获取用户选择的节点信息，如果用户只选择了一个节点，则使用 prompt 对话框获取用户输入的新节点名称和父节点编号，如果信息有效，则根据节点编号查找到之前的节点信息，并使用 jQuery 的 attr 和 text 方法分别对该节点的 data-id、data-pid 和 td 元素内容进行更新，最后提示用户编辑节点成功。如果用户未选择节点或选择了超过一个节点，则会提示用户请选择一个节点进行编辑。

6. 实现删除节点功能

在删除节点操作中，需要获取用户选择的节点信息，并根据选择的节点编号，删除对应的节点信息，并将其从表格中移除。具体代码如下：

// 删除节点函数
function deleteNode() {
  const checkedNodes = $('.treegrid-table').bootstrapTable('getSelections');

  if (checkedNodes.length > 0) {
    if (confirm('确定要删除选择的节点吗？')) {
      checkedNodes.forEach(node => {
        $(`.treegrid-table .treegrid-${node.id}`).remove();
      });

      $('.treegrid-table').treegrid('reload');
      alert('删除节点成功');
    }
  } else {
    alert('请选择一个或多个节点进行删除');
  }
}

// 绑定删除按钮事件
$('.btn-delete').click(function() {
  deleteNode();
});

在函数中，首先通过 bootstrapTable 的 getSelections 方法获取用户选择的节点信息，如果用户选择了一个或多个节点，则会弹出确认删除对话框，如果用户选择了确定，则通过 forEach 方法遍历所选择的节点，并通过 jQuery 的 remove 方法将之前的节点信息从表格中移除，最后调用 treegrid 的 reload 方法重新渲染表格，提示用户删除节点成功。如果用户未选择节点，则会提示用户请选择一个或多个节点进行删除。

到此，bootstrap treegrid 组件的封装就完成了。通过定制化的开发，实现了一个功能强大的组件，可以满足不同项目中数据的展示与操作需求。