使用插件

cdList 绝大部分是对插件的操作进行处理,每种插件看似独立却又存在着联系,例如:

  1. 当进行筛选后需要对分页插件进行重置
  2. 改变搜索关键字后,需要重置筛选和分页
  3. 改变筛选后需要重置排序
  4. .......

所以,CdList 尽量提供各种完善的插件共开发者使用,同时保留开发自定义插件的能力

实例化插件

① 直接 new 即可立即创建一个插件实例,不过想让插件可用必须将其放入一个 CdList 实例中。

var search = new CdList.addons.Search({
  btnText: '查询',
  historyEnable: 1
});

var cdlist = new CdList({
  //....
  addons: [search]
  //...
});

② 后续的开发中即可根据需求调用插件的 Api, 对于 Search 插件,开发者可以调用 setValue,改变检索关键字;其效果跟用户点击搜索按钮一致。

search.setValue('ruby')

插件的通用配置

① 设置 container 可以让插件展示在你想要的位置,不然程序会自动安排插件的展示位置

var search = new CdList.addons.Search({
  container: '#my-search-wrap',
  btnText: '查询'
});

② 设置 historyEnable: 1 可以让插件开启 history 记录功能,前提是你的浏览器支持,如果不支持将会 通过刷新页面改变 url

var search = new CdList.addons.Search({
  container: '#my-search-wrap',
  btnText: '查询',
  historyEnable: 1
});

③ 设置 historyKey 可以改变默认的 url param,例如:分页插件会将 page 作为 param,如果此参数有其他意义,开发者可以对其进行变更

有些多参数的插件需要设置多个 historyKey,具体设置方式参见对应插件的 API

/**
 * 分页改变后 url 类似:
 * /{path}/?mypage=2
 */
var pg = window.pg = new CdList.addons.Pagination({
  historyEnable: 1,
  historyKey: 'mypage',
  getSetting: function (json) {
    if (json) {
      return {
        total: 3
      }
    }
  }
});

results matching ""

    No results matching ""