列表展示插件,可实现分页、简单的搜索和排序

##列表展示插件 list.js

列表展示插件,可实现分页、简单的搜索和排序。

插件写得比较简洁,使用时需要较多配置。

DEMO在这里

###Basic 基本

依赖:jquery, handlebars, bootstrap-pager

###Options 参数

#####data array 展示的数据

#####template string 展示数据的模板

#####setRenderData function 利用要展示的数据,构造用于渲染模板的数据,默认

function(data, rule){ var sort = { key: '', status: '' } if(rule && rule.length){ sort = { key: rule[0].key, status: rule[0].status } } return {list: data, sort: sort.key + sort.status} }

#####getHtml function(一般不需要填写) 把数据和模板转换成html

function(data, template){ var html = '' ... return html }

#####pageSize int(10) 每页显示数据条数

#####pageContainer string / $dom 分页html放置的容器

#####pageConfig object 分页插件的参数

#####condition array 初始化时过滤数据的条件

使用indexOf过滤

[{ key: 'status', // 搜索的字段名 keyword: 'publish' // 搜索的关键词 }]

#####sortConfig object 排序的参数设置,只有在这里设置了,才能使用后面的排序方法

{ CreateTime: { // 排序的字段名 type: 'date', // 数据类型,可选'date', 'number', 其他视为字符串 fn: 'asc', // string 或 function, 除function外,其他视为按值的升序排列 status: 'asc' // 当前的排序状态 'asc'升序,'desc' 降序 } // fn的示例 function(a, b){ // a, b是在data参数中的一条数据 // 排序状态为'asc'时,排序结果就是该函数的排序结果,'desc'时,再反序一下 var result = a.number - b.number return result }

###Method 方法

#####search 搜索

var myList = $('#list').list(options).data('list') myList.search(condition) // condition 和上面的 condition参数格式一样

#####sort 排序

var myList = $('#list').list(options).data('list') myList.sort(key) // key为已在sortConfig中配置的字段名 // 排序对当前状态反向排序

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。