CdList
实例化参数
disableHistory全局控制否是阻止 history 记录，如果设置成 true，所有的 history 改变会变成刷新页面type: bool | default: false
lang多语言设置，目前只有zh、entype: string | default: 'zh'
isTable设置是否展示为表格type: bool | default: false
tableClass设置表格的类名type: string
ulClass设置列表的类名type: string
addons设置插件列表，必填type: array
empty设置输入为空时，展示 html 的回调函数type: function
getUrl设置请求数据的回调函数，其参数为各个插件的状态，必填type: function
getAjaxData设置自行请求数据的回调函数，其返回值必须为 jqXHR 对象type: function
getRowsData设置返回列表数据的回调函数，其参数为成功回调的 json 数据，必填type: function
rows设置返回每行渲染 html 的回调函数，必填type: function
headerRow当设置为表格模式时，返回表头 html 的回调函数type: function
用法
new CdList({
disableHistory: true,
lang: 'en',
isTable: 1,
tableClass: 'myTableClass',
ulClass: 'myUlClass',
addons: [search, sort, filter, pg],
empty: function () {
return '不在地球上',
},
getUrl: function (data) {
console.log(data);
return '/ajax.json'
},
getAjaxData: function (url) {
return $.ajax({
url: url,
dataType: 'jsonp'
});
},
getRowsData: function (json) {
return json.list;
},
rows: function (item) {
return '<tr><td>' + item.name + '</td></tr>'
},
// isTable：1 时设置
headerRow: function () {
return '<tr><th>名称</th></tr>'
}
}, '#cdlist-wrap');
实例方法
在下面的示例中
cdList为实例化对象
① cdList.getList
进行一次列表的渲染，一般只需要实例化后调用一次即可，后续对插件的操作会自动调用
用法
cdList.getList();
② cdList.getHistoryValue
传入 key 获取 history 相关的值
用法
/**
* 对于 url：/?page=1
*/
cdList.getHistoryValue('page'); // 输出: 1
③ cdList.setHistory
传入 key, value 更改当前 history url
用法
/**
* 对于原始url：/?page=1
*/
cdList.setHistory('tab', 'fruit');
// url 改变为: /?page=1&tab=fruit
④ cdList.removeHistory
传入 key 删除 url 上对应 param
用法
/**
* 对于原始url：/?page=1&tab=fruit
*/
cdList.removeHistory('tab');
// url 改变为: /?page=1
事件
在下面的示例中
cdList为实例化对象
cdList.on('startloading', cb)
开始获取数据
cdList.on('endloading', cb)
完成获取数据
cdList.on('hashchange', cb)
history 改变事件，cb 中可获取到当前 history param
cdList.on('loadeddata', cb)
完成数据的获取，cb 中可获取到接口数据