使用CdList轻松构建列表应用

作者: 高超04 | 来源:发表于2017-02-17 11:23 被阅读0次

使用CdList轻松构建列表应用
flutter基础之ListView
Osi开放服务集成
搅局者还是革新者，用 Python语言构建 Flutter 应
搭建React开发环境
使用FlatList构建列表
Hacking with iOS: SwiftUI Editio
列表
Java8新特性8--使用CompletableFuture构建
iOS应用常用架构

在进行 cms，用户中心开发时遇到了很多列表展示的需求。无非就是：筛选、排序、分页等功能的组合，同时还需要支持 history 记录(前进、后退等)。

为了提升组内同学开发效率， CdList 便诞生了：

分页、排序、筛选、日期、搜索等作为插件进行创建
```
  var pageInstance = new CdList.addons.Pagination({...})
```
对任意插件的操作，都会触发回调，由开发者自行拼接列表 API 请求地址

  getUrl: function (data) {
    console.log(data);
    return '/ajax.json?' + $.param(data)
  }

写好渲染每行数据的模板，之后的一切交给 CdList 帮你搞定
借助 History Api 列表的数据为异步请求，并且支持 url 定位(产品需求进入页面后直接选中筛选项目的某一项，可通过 url 进行控制)

所有开发资源

快速开始

1. 安装

非 webpack 构建：
1. 进入 git repo，下载 lib/cdlist.js 即可
2. 如需要默认样式引入lib/cdlist.css

webpack 构建：
1. npm install cdlist --save
2. 在 js 文件中
```
var CdList = require('cdlist');
```

2. 创建列表应用

下面使用高德 API 创建示例，讲解使用方法，戳此链接查看DEMO

选择要使用的插件

BF4E436B-E2A7-49CC-99DD-B720C3D4FC48.png

这个实例中需要创建 Search、Pagination 、Filter三个插件点击可获得完整api

创建插件的创建代码如下：

// 初始化搜索插件
var search = new CdList.addons.Search({
  historyEnable: 1,
  placeholder: '输入您想查询的内容'
});
// 初始化分页插件
var pg = new CdList.addons.Pagination({
  historyEnable: 1,
  onChange: function () {
    $('body, html').animate({
      scrollTop: $('.cdlist-container').offset().top
    }, 300);
  },
  getSetting: function (json) {
    return {
      total: parseInt(json.count / 13)
    }
  }
});
// 初始化筛选插件
var filter = new CdList.addons.Filter({
  historyEnable: 1,
  line: 1,
  filters: [
    {
      label: '服务类型：',
      name: 'types',
      datas: [
        { name: '不限', value: '' },
        { name: '餐饮服务', value: '05' },
        { name: '汽车服务', value: '01' },
        { name: '购物服务', value: '06' },
        { name: '医疗服务', value: '09' },
      ]
    },
    {
      label: '城市编码：',
      name: 'city',
      datas: [
        { name: '北京', value: 'beijing' },
        { name: '上海', value: 'shanghai' },
        { name: '深圳', value: 'shenzhen' },
        { name: '广州', value: 'guangzhou' },
      ]
    }
  ]
});

historyEnable 标识此插件是否记录 history(是否可以通过前进、后退控制)
Pagination.onChange 为分页插件操作后的回调
Pagination.getSetting 需要返回总页数，其参数为首次请求 api 的数据
Filter.line 设置是否以 ul、li 形式展示筛选插件、否则将展示为 select 结构
Filter.filters 配置筛选数据

创建列表实例

列表实例承载了：数据请求、模板载入、应用插件等功能。

插件本身没有任何作用，只有挂载到某个列表实例才会展示
所有对插件的操作都会触发 getUrl 回调，其参数为每个插件当前的选中状态，开发者需要自行构建请求 api
如果为 json api 可以直接发送 get 请求；如果想自定义请求方式需要在getAjaxData 回调中写自己 ajax 请求，并返回实例

// 创建 cdlist 表格应用，整合所有插件 
var cdList = window.cdlist = new CdList({
  ulClass: 'amap-list',
  addons: [search, filter, pg],

  getUrl: function (data) {
    var param = {
      keywords: data.search,
      types: data.filter.types,
      city: data.filter.city,
      page: data.pagination + 1,
      key: '6a8449ec9b2da3fcff320383bfc69e92',
      extensions: 'all',
      offset: 13
    };
    return 'https://restapi.amap.com/v3/place/text?' + $.param(param);
  },

  empty: function () {
    return '<div class="amap-list-empty">抱歉，没有您查找的 POI </div>'
  },

  getAjaxData: function (url) {
    return $.ajax({
      url: url,
      dataType: 'jsonp'
    });
  },

  rows: function (item) {
    var html = ['<li>',
      '<div class="img" style="background-image:url(' + (item.photos[0] && (item.photos[0].url + '?operate=merge&w=160&h=150&position=5') || DEFAULT_IMAGE) + ')"/>',
      '<div class="item-main">',
        '<div class="item-name">' + item.name + '</div>',
        '<div class="item-address">详细地址' + item.address + '</div>',
      '</div>',
    '</li>'].join('');

    return html;
  },

  getRowsData: function (json) {
    return json.pois;
  }
}, '#cdlist-wrap');