yadcf 项目教程

yadcf 项目教程

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

yadcf（Yet Another DataTables Column Filter）是一个用于在 DataTables jQuery 插件上添加列过滤组件的开源项目。以下是项目的目录结构及各部分的简要介绍：

yadcf/
├── css/
│   └── yadcf.css
├── js/
│   └── jquery.dataTables.yadcf.js
├── examples/
│   ├── basic/
│   ├── advanced/
│   └── ...
├── README.md
└── LICENSE

• css/: 包含 yadcf 的样式文件 yadcf.css。
• js/: 包含 yadcf 的核心 JavaScript 文件 jquery.dataTables.yadcf.js。
• examples/: 包含多个示例，展示了 yadcf 的不同用法和配置。
• README.md: 项目的介绍和使用说明。
• LICENSE: 项目的许可证文件。

2. 项目的启动文件介绍

yadcf 项目的启动文件主要是 jquery.dataTables.yadcf.js。这个文件是 yadcf 的核心库，需要在页面中引入以使用 yadcf 的功能。

<link rel="stylesheet" href="css/yadcf.css">
<script src="js/jquery.dataTables.yadcf.js"></script>

在引入这些文件后，可以通过以下方式初始化 yadcf：

$(document).ready(function() {
    $('#example').DataTable();
    yadcf.init(document.getElementById('example'), [
        {column_number: 0, filter_type: "text"},
        {column_number: 1, filter_type: "select"},
        // 其他列的配置
    ]);
});

3. 项目的配置文件介绍

yadcf 的配置主要通过 yadcf.init() 方法进行。以下是一些常用的配置参数：

• column_number: 列的索引号。
• filter_type: 过滤类型，如 "text", "select", "multi_select" 等。
• filter_delay: 过滤延迟时间（毫秒）。
• filter_match_mode: 过滤匹配模式，如 "exact", "start", "contains" 等。
• exclude: 排除某些值。
• datepicker_type: 日期选择器的类型。

详细的配置参数和说明可以在 jquery.dataTables.yadcf.js 文件中找到。

yadcf.init(document.getElementById('example'), [
    {
        column_number: 0,
        filter_type: "text",
        filter_delay: 500,
        filter_match_mode: "contains"
    },
    {
        column_number: 1,
        filter_type: "select",
        exclude: ["Option1", "Option2"]
    },
    // 其他列的配置
]);

通过这些配置，可以灵活地定制 yadcf 的行为，以满足不同的需求。