使用一个 Cdlist

查看示例

点击，Cdlist Home 查看各种插件的使用方法

如何引入

普通方式：进入 CdList repo 下载 lib/cdlist.js 引入页面即可
Webpack：
1. npm install cdlist --save
2. var CdList = require('cdlist');

关于样式 CdList提供一套简单的样式lib/cdlist.css，在样式要求度不高的应用中可以使用；但强烈建议开发者自己定义样式文件

创建 Cdlist

① 对于一个列表应用应该至少包含一个分页插件：

通过设置 historyEnable: 1 插件已经开启了 history 记录模式，在进行分页操作时 url 会随着当前的页码进行变化
在你按下前进（后退）后，分页插件的展示会发生变化同时进行了数据的更新
getSetting 会把请求到的数据作为参数，其返回值为分页的总页数。

var pg = new CdList.addons.Pagination({
  historyEnable: 1,
  getSetting: function (json) {
    return {
      total: 3
    }
  }
});

② 下面我们需要一个列表主体，承载分页插件，以及完成后台数据的请求

#cdlist-wrap 是承载表格主体的 dom 节点
getUrl 从参数中获取到每个插件的数据，并返回请求列表接口的 url，
getRowsData 此回调处理接口返回的 json 数据，并返回一个 array 对象作为渲染列表的数据
rows 返回每条数据 html 片段，其参数为当前行的数据

搞定，一个带分页、history功能的列表就写完了！

var TEST_DATA = [
  {
    name: '八达岭长城',
    address: 'G6京藏高速58号出口'
  },
  {
    name: '颐和园',
    address: '新建宫门路19号'
  },
];


var cdList = new CdList({
  getUrl: function (data) {
    return '/{server_url}/?page=' + data.pagination;
  },

  getRowsData: function (json) {
    // 生产环境中应该返回服务端提供的数据
    return TEST_DATA;
  },

  rows: function (item) {
    return '<li>' + item.name + ':' + item.address + '</li>'
  },

  addons: [pg]
}, '#cdlist-wrap');

cdList.getList();

设置请求地址

对于 CdList 列表系统，开发者最多的工作就是拼接请求地址，使用 getUrl 回调函数，其参数为每个插件当前的数据，最后返回一个可请求的 url 地址。

一个复杂的列表系统，其回调参数看起来是这样的


var cdList = new CdList({
  ....
  getUrl: function (data) {
    var url;

    console.log(data);

    // 巴拉巴拉一堆拼接 url 的逻辑
    ...

    return url;
  }
  ...
}, '#cdlist-wrap');

console 内容如下

{
    "search": "133",
    "sort": {
        "key": "time",
        "type": "asc"
    },
    "filter": {
        "usertype": "1"
    },
    "pagination": 3
}

开发者可以使用如上数据生成正确的请求地址

跨域请求数据

处理跨域接口时，需要用到 getAjaxData 回调，回调需返回一个 jqXHR 对象。

url 参数为 getUrl 回调的返回值

var cdlist = new CdList({
  //....
  getAjaxData: function (url) {
    return $.ajax({
      url: url,
      dataType: 'jsonp'
    })
  }
  //...
}, '#cdlist-wrap');

渲染表格

如果要渲染表格，设置 isTable: 1 即可

tableClass 表格最外层的样式类名
headerRow 返回表头 html 的回调
rows 返回每个 tr html 的回调

var cdlist = new CdList({
  //....
  isTable: 1,
  headerRow: function () {
    return '<tr><th>名称</th><th>地点</th></tr>'
  },
  rows: function (item) {
    return '<tr><td>' + item.name + '</td><td>' + item.address + '</td></tr>'
  }
  //...
}, '#cdlist-wrap');

理解工作流程

CdList 将子功能作为插件加入到表格主体中，插件之间通过事件进行调用。一个表格的工作流程如下：

创建实例后调用 getList 启动数据获取，~（后续对插件进行任何操作会自动调用）~
收集所有插件当前的状态，并调用 getUrl 回调函数，由开发者拼接请求地址
请求到数据后调用 getRowsData 回调函数，开发者可以在此回调中处理接口返回的数据，同时返回一个数组进行列表的渲染
内部循环数组并调用 rows 回调函数，此函数返回每行 html 结构，并将列表整体进行渲染
操作任意插件会更新 url（需开启记录 history），之后重复此流程

开始使用