Stupid Table Plugin 使用教程

2024-08-22 11:28:07作者：齐冠琰

1. 项目的目录结构及介绍

Stupid Table Plugin 是一个简单的 jQuery 表格插件，旨在提供基本的表格排序功能。以下是该项目的目录结构：

Stupid-Table-Plugin/
├── css/
│   └── stupidtable.css
├── js/
│   └── stupidtable.js
├── examples/
│   ├── basic.html
│   ├── custom_sort_functions.html
│   ├── data_attributes.html
│   ├── example.css
│   ├── example.js
│   ├── index.html
│   ├── jquery.min.js
│   └── underscore-min.js
├── README.md
└── LICENSE

目录介绍

css/: 包含插件的样式文件 stupidtable.css。
js/: 包含插件的核心 JavaScript 文件 stupidtable.js。
examples/: 包含多个示例文件，展示如何使用插件。
README.md: 项目的说明文档。
LICENSE: 项目的许可证文件。

2. 项目的启动文件介绍

项目的启动文件主要是 examples/index.html，这是一个示例文件，展示了如何使用 Stupid Table Plugin。

启动文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stupid Table Plugin Examples</title>
    <link rel="stylesheet" href="../css/stupidtable.css">
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <h1>Stupid Table Plugin Examples</h1>
    <ul>
        <li><a href="basic.html">Basic Example</a></li>
        <li><a href="custom_sort_functions.html">Custom Sort Functions</a></li>
        <li><a href="data_attributes.html">Data Attributes</a></li>
    </ul>
    <script src="jquery.min.js"></script>
    <script src="../js/stupidtable.js"></script>
    <script src="example.js"></script>
</body>
</html>

启动文件说明

引入样式文件: stupidtable.css 和 example.css。
引入 JavaScript 文件: jquery.min.js 和 stupidtable.js，以及示例脚本 example.js。
示例链接: 提供了三个示例链接，分别是基本示例、自定义排序函数示例和数据属性示例。

3. 项目的配置文件介绍

Stupid Table Plugin 没有专门的配置文件，其配置主要通过 HTML 属性和 JavaScript 代码实现。

配置示例

在 examples/basic.html 中，可以看到基本的配置方式：

<table class="table" data-sort="int">
    <thead>
        <tr>
            <th data-sort="int">ID</th>
            <th data-sort="string">Name</th>
            <th data-sort="float">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>1.25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>0.75</td>
        </tr>
    </tbody>
</table>

<script>
    $("table").stupidtable();
</script>