在進行 cms婉烟，用戶中心開發(fā)時遇到了很多列表展示的需求鼻弧。無非就是：篩選设江、排序、分頁等功能的組合攘轩，同時還需要支持 history 記錄
(前進叉存、后退等)。
為了提升組內同學開發(fā)效率撑刺， CdList 便誕生了：
-
分頁鹉胖、排序、篩選够傍、日期甫菠、搜索等作為插件進行創(chuàng)建
var pageInstance = new CdList.addons.Pagination({...}) 對任意插件的操作，都會觸發(fā)回調冕屯，由開發(fā)者自行拼接列表 API 請求地址
getUrl: function (data) {
console.log(data);
return '/ajax.json?' + $.param(data)
}
寫好渲染每行數(shù)據(jù)的模板寂诱，之后的一切交給 CdList 幫你搞定
借助 History Api 列表的數(shù)據(jù)為異步請求，并且支持 url 定位
(產(chǎn)品需求進入頁面后直接選中篩選項目的某一項安聘，可通過 url 進行控制)
所有開發(fā)資源
快速開始
1. 安裝
- 非 webpack 構建：
- 進入 git repo痰洒，下載
lib/cdlist.js即可 - 如需要默認樣式引入
lib/cdlist.css
- 進入 git repo痰洒，下載
- webpack 構建：
- npm install cdlist --save
- 在 js 文件中
var CdList = require('cdlist');
2. 創(chuàng)建列表應用
下面使用高德 API 創(chuàng)建示例，講解使用方法浴韭，戳此鏈接查看DEMO
- 選擇要使用的插件
BF4E436B-E2A7-49CC-99DD-B720C3D4FC48.png
這個實例中需要創(chuàng)建 Search丘喻、Pagination 、Filter三個插件點擊可獲得完整api
創(chuàng)建插件的創(chuàng)建代碼如下：
// 初始化搜索插件
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: '醫(yī)療服務', value: '09' },
]
},
{
label: '城市編碼：',
name: 'city',
datas: [
{ name: '北京', value: 'beijing' },
{ name: '上海', value: 'shanghai' },
{ name: '深圳', value: 'shenzhen' },
{ name: '廣州', value: 'guangzhou' },
]
}
]
});
-
historyEnable標識此插件是否記錄 history(是否可以通過前進念颈、后退控制) -
Pagination.onChange為分頁插件操作后的回調 -
Pagination.getSetting需要返回總頁數(shù)泉粉，其參數(shù)為首次請求 api 的數(shù)據(jù) -
Filter.line設置是否以 ul、li 形式展示篩選插件、否則將展示為 select 結構 -
Filter.filters配置篩選數(shù)據(jù)
- 創(chuàng)建列表實例
列表實例承載了：數(shù)據(jù)請求嗡靡、模板載入跺撼、應用插件等功能。
- 插件本身沒有任何作用讨彼，只有掛載到某個列表實例才會展示
- 所有對插件的操作都會觸發(fā)
getUrl回調歉井，其參數(shù)為每個插件當前的選中狀態(tài)，開發(fā)者需要自行構建請求 api - 如果為 json api 可以直接發(fā)送
get請求哈误；如果想自定義請求方式需要在getAjaxData回調中寫自己 ajax 請求哩至，并返回實例
// 創(chuàng)建 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');
-
new CdList第一個參數(shù)為配置項憨募，第二個參數(shù)為列表容器 -
ulClass未列表增加自定義類名 -
getUrl回調返回列表 api 請求地址 -
getAjaxData進行 jsonp 的請求 -
getRowsData返回請求接口的列表數(shù)據(jù) -
rows返回每一行的渲染模板 -
empty返回如果沒有數(shù)據(jù)時的替代內容
- 讓他跑起來
cdList.getList();
就這么簡單一共 99 行代碼，構建了豐富的列表應用袁辈，再也不用擔心PM的各種列表需求了
設計思路
- 每個插件獨立配置菜谣，由開發(fā)者選擇使用，并易于擴展自定義插件晚缩。
- 插件之間沒有直接交互尾膊，都通過
CdList 實例派發(fā)的事件進行控制 -
CdList 實例提供 History 記錄、更改功能荞彼，并將其派發(fā)到每個插件中
CdList 架構.png
場景
適合什么
- 后臺系統(tǒng)的列表展示需求
- 用戶端對樣式冈敛、自定義操作要求不高的列表應用
- 數(shù)據(jù)的排序、搜索鸣皂、分類都是由 api 接口提供
不適合什么
- 數(shù)據(jù)的排序抓谴、搜索、分類為前端邏輯
- 交互寞缝、樣式自定義很復雜的列表（電商平臺的商品列表）
后續(xù)計劃
- 移除 jQuery 的依賴
- 豐富更多的插件
- 插件提供的使用方法癌压、事件還需補充
