快速开始

在本章你将学会如何构建一个表格系统, 包含如下功能：

ajax 请求数据、渲染表格
添加搜索控件

了解工作流程

cdtable 通过回调函数获取 ajax 请求、表格渲染的必要数据。您可以根据自己的喜好渲染不同样式的表格，cdtable 默认不带任何样式，但在团队环境中一个统一的样式往往是一个很好的提议，那么需要开发者自行根据 class 类名创建属于您的样式风格。

下面我将一步步教大家如何构建简单的表格系统。

引入工程文件

将下载好的cdtable.js引入您的工程

<script src="/static/cdtable.js" type="text/javascript"></script>

url 地址获取

cdtable 使用各种回调函数获取数据，以完成表格的创建。下面我们将创建几个常用的回调函数。

首先定义获取接口数据的 url 地址的回调函数: getUrl

var getUrl = function (data) {
    var prefix = '/api/getuserlist/?';
    var param = {};

    // 从 search 插件中取出输入内容
    if (data.search) {
        param.keyword = data.search;
    }

    // 返回发送 ajax 请求的 url
    return prefix + $.param(param);
}

data 参数是您决定构建 url 字符串的数据基础，加入不同的插件后，data 参数也有不同的字段。在本例中只有 search 一个插件那么 data 的结构为：

{
    search: 'hello world' // 您的输入内容
}

定义数据过滤回调函数

通常需要对接口返回的 json 数据进行处理，并给 cdtable 一个数组用于内容的渲染。 cdtable 会遍历此数组，在每次遍历中调用 rows 回调函数，拼装 table 的 HTML 字符串。

/**
 * json 为后台返回的原始数据
 */
var getRowsData = function (json) {
    if (json && json.list) {
        return json.list;
    }
}

定义表格渲染回调函数

渲染表格分为两个回调函数：headerRow，rows。

headerRow 返回表头的 HTML 字符串

/**
 *    json 为 ajax 请求获取的数据，通常定义表头时不会用到
 */
var headerRow = function (json) {
    return [
        '<tr>',
            '<th>姓名</th>',
            '<th>年龄</th>',
            '<th>性别</th>',
            '<th>头像</th>',
        '</tr>'
    ]
};

rows 返回每一行的 HTML 字符串，item 参数为当前行的数据

var rows = function (item) {
    return [
        '<tr>',
            '<td>item.name</td>',
            '<td>item.name</td>',
            '<td>item.name</td>',
            '<td>item.name</td>',
        '</tr>'
    ]
}

初始化 cdtable

到目前为止，我们定义了：getUrl，getRowsData，headerRow，rows 四个回调函数，接下来我们将初始化 cdtable。

$('#cd-table-container').cdtable({
    headerRow: headerRow,
    rows: rows,
    getUrl: getUrl,
    getRowsData: getRowsData
});

ok，我们已经完成了一个 table 系统，等等...还差一些内容，那就是插件系统

新建 search 插件

search 插件提供了一个 input 元素用于关键字的检索，首先我们要新建一个 search 实例

var searchAddon = new cdtable.addons.Search({
    container: '#cdtable-search-wrap'
});

如果不提供 container 参数，插件会自己选定一个位置进行显示

注入插件

在新建插件实例后，我们需要将此实例与之前初始化的 table 系统进行关联。则需要用到插件注入函数：setAddons

// 首先保存 table 系统实例
var cdtableIns = $('#cd-table-container').cdtable();

// 注入插件
// setAddons 接受一个插件数组
cdtableIns.setAddons([searchAddon]);

注入插件后，cdtable 会立即对插件 UI 进行初始化。好了万事俱备就差最后一步了

启动 table 系统

注入插件后，您可以调用 getTable 函数，一切就是那么井然有序的运行了起来。

cdtableIns.getTable();

好了，我们来梳理下 cdtable 都做了些什么：

首先我们定义了一系列回调函数并初始化了表格系统
接着创建了插件实例，并与表格系统进行关联
最后让整个表格系统自己跑起来