用formattable格式化表格

基础概念

formattable 是一个用于格式化表格数据的 JavaScript 库。它允许你通过简单的配置来美化表格，使其更具可读性和美观性。formattable 支持多种格式化选项，如颜色、字体样式、对齐方式等。

类型

formattable 主要有以下几种类型：

基本表格：最简单的表格形式，适用于简单的数据展示。
分组表格：可以将表格数据分组显示，便于查看和分析。
排序表格：支持对表格数据进行排序，方便用户查找和比较数据。
筛选表格：提供筛选功能，可以快速过滤出需要的数据。

应用场景

formattable 适用于以下场景：

数据报表：用于生成美观的数据报表，便于查看和分析。
数据可视化：结合图表库，可以将表格数据可视化展示。
后台管理系统：用于展示和管理系统中的数据。
Web 应用：在 Web 应用中展示和操作数据。

示例代码

以下是一个使用 formattable 格式化表格的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formattable Table Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formattable/0.2.1/formattable.min.css">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <table id="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td>Los Angeles</td>
            </tr>
            <tr>
                <td>Mike Johnson</td>
                <td>40</td>
                <td>Chicago</td>
            </tr>
        </tbody>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/formattable/0.2.1/formattable.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#table').formattable({
                headers: {
                    0: 'Name',
                    1: 'Age',
                    2: 'City'
                },
                columns: {
                    0: {formatter: $.fn.formattable.formatName},
                    1: {formatter: $.fn.formattable.formatNumber},
                    2: {formatter: $.fn.formattable.formatString}
                }
            });
        });
    </script>
</body>
</html>