正文

学会这6款前端表格插件，轻松打造高效数据展示页面

/0 浏览量
0715

在当今数字化时代，数据展示页面的设计越来越受到重视。作为前端开发者，掌握一些高效的前端表格插件，可以帮助我们轻松地打造出既美观又实用的数据展示页面。以下将介绍6款优秀的前端表格插件，助你提升工作效率。

1. Bootstrap Table

Bootstrap Table是一款基于Bootstrap的表格插件，它具有丰富的功能和良好的兼容性。以下是该插件的几个亮点：

  • 响应式设计：支持移动端和桌面端，适应各种屏幕尺寸。
  • 插件丰富：支持分页、排序、搜索、导出等功能。
  • 易于上手：基于Bootstrap框架，无需额外学习。

代码示例

<link href="https://cdn.jsdelivr.net/npm/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table/dist/bootstrap-table.min.js"></script>

<table id="table"></table>

<script>
  $(function () {
    $('#table').bootstrapTable({
      url: 'data.json',
      columns: [{
        field: 'id',
        title: 'ID'
      }, {
        field: 'name',
        title: '姓名'
      }, {
        field: 'age',
        title: '年龄'
      }]
    });
  });
</script>

2. DataTables

DataTables是一款功能强大的表格插件，支持多种浏览器和操作系统。以下是该插件的几个特点：

  • 高度定制：支持自定义样式、插件和功能。
  • 响应式设计：适应各种屏幕尺寸。
  • 插件丰富：支持分页、排序、搜索、导出等功能。

代码示例

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="table" class="display">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

<script>
  $(document).ready(function () {
    $('#table').DataTable();
  });
</script>

3. Tabulator

Tabulator是一款简洁、易用的表格插件，具有以下特点：

  • 轻量级：压缩后仅10KB。
  • 响应式设计：适应各种屏幕尺寸。
  • 插件丰富：支持分页、排序、搜索、导出等功能。

代码示例

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

<table id="table"></table>

<script>
  var data = [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 }
  ];

  var table = new Tabulator('#table', {
    data: data,
    columns: [
      { title: 'ID', field: 'id' },
      { title: '姓名', field: 'name' },
      { title: '年龄', field: 'age' }
    ]
  });
</script>

4. Handsontable

Handsontable是一款表格插件，具有以下特点：

  • 单元格编辑：支持单元格编辑、合并单元格等功能。
  • 响应式设计：适应各种屏幕尺寸。
  • 插件丰富：支持分页、排序、搜索、导出等功能。

代码示例

<link href="https://unpkg.com/handsontable/dist/handsontable.full.css" rel="stylesheet">
<script src="https://unpkg.com/handsontable/dist/handsontable.full.js"></script>

<div id="table"></div>

<script>
  var data = [
    [1, '张三', 25],
    [2, '李四', 30]
  ];

  var hot = new Handsontable(document.getElementById('table'), {
    data: data,
    colHeaders: ['ID', '姓名', '年龄'],
    rowHeaders: true
  });
</script>

5. ag-Grid

ag-Grid是一款功能强大的表格插件，具有以下特点：

  • 高性能：支持大数据量展示。
  • 高度定制：支持自定义样式、插件和功能。
  • 响应式设计：适应各种屏幕尺寸。

代码示例

<link href="https://unpkg.com/ag-grid-community/styles/ag-grid.css" rel="stylesheet">
<link href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css" rel="stylesheet">
<script src="https://unpkg.com/ag-grid-community"></script>

<div id="myGrid" style="width: 100%; height: 100%;"></div>

<script>
  var columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: '姓名', field: 'name' },
    { headerName: '年龄', field: 'age' }
  ];

  var gridOptions = {
    columnDefs: columnDefs,
    rowData: [
      { id: 1, name: '张三', age: 25 },
      { id: 2, name: '李四', age: 30 }
    ],
    domLayout: 'autoHeight',
    onGridReady: function () {
      var allColumns = gridOptions.columnApi.getAllColumns();
      var allColumnIds = allColumns.map(function (column) { return column.field; });
      console.log('All column IDs: ' + allColumnIds.join(', '));
    }
  };

  new agGrid.Grid(document.getElementById('myGrid'), gridOptions);
</script>

6. jQuery DataTables

jQuery DataTables是一款基于jQuery的表格插件，具有以下特点：

  • 简单易用：基于jQuery，无需额外学习。
  • 响应式设计：适应各种屏幕尺寸。
  • 插件丰富：支持分页、排序、搜索、导出等功能。

代码示例

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="table" class="display">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

<script>
  $(document).ready(function () {
    $('#table').DataTable();
  });
</script>

通过学习以上6款前端表格插件，相信你能够轻松打造出高效、美观的数据展示页面。祝你前端开发之路越走越远！

-- 展开阅读全文 --