一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)
filterMore诞生了,源代码已开源至GitHub:https://github.com/CrazyJson/filterMore
阅读目录
- 插件介绍
- 参数说明
- 使用案例
- 总结
| searchBoxs参数大全 | ||||
| 参数名 | 字符类型 | 释义说明 | 默认值 | 使用频率 |
|---|---|---|---|---|
| id | string | 筛选条件项id，在查询回调事件的参数时会用上 | 没传会使用1,2,3... | 必须 |
| title | string | 筛选条件显示标题 | null | 必须 |
| data | Array | 选项数据,数据格式[{value:'1',text:'语文'},{value:'2',text:'数学'}] | null | 必须 |
| isMultiple | boolean | 是否允许条件多选 | false | 常用 |
| type | string | 存在自定义日期区间时需设定 值可为 datetime(年月日时分秒) | date(年月日) | null | 常用 |
| defaults | Array | 默认选中值，为空则选中全部 | null | 常用 |
| custom | object | 自定义筛选,详情参见custom参数大全 | null | 常用 |
| valueField | string | 选项数据 键字段名称 | value | 不常用 |
| textField | string | 选项数据 值字段名称 | text | 不常用 |
| isShowAll | boolean | 是否显示选项中的全部 | true | 不常用 |
| custom参数大全 | ||||
| 参数名 | 字符类型 | 释义说明 | 默认值 | 使用频率 |
|---|---|---|---|---|
| isRange | boolean | 是否区间,用于控制自定义输入框个数 为false一个输入框 true两个输入框 | false | 非必须 |
| event | function | 点击确定按钮回调事件，函数体申明如下 function(start,end){} isRange为false时 start有值 end:undefined isRange为true时都有值 ,函数返回值为boolean类型 为false时不触发查询事件 | null | 常用 |
| 方法大全 | ||||
| 方法名 | 方法功能 | 参数 | 返回值 | 返回值说明 |
|---|---|---|---|---|
| getParamList | 获取搜索条件参数 | 无 | array[] | :[ {{"CustomList":["2016-09-01 00:00:00","2016-09-15 00:00:00"] //自定义区间值 ,"isMultiple":false,"id":"CreatedTimeOne"}, {"ValueList":["1"] //选中值,"isMultiple":false,"id":"CreatedTime"}, {"ValueList":["0","1"],"isMultiple":true,"id":"Status"}, {"ValueList":[],"isMultiple":false,"id":"Createor"} ] |
| searchFunctionCall | searchBox对外提供的调用函数 | {"setValue":[]} key为要调用的函数名称 value:为函数调用参数 | 依据具体函数定 | setValue函数为赋值函数 调用如下 $(".searchbox").searchFunctionCall({setValue:[{"ValueList":["1"],"id":"CreatedTime"}]}) getParamList函数为取值函数 调用如下 $(".searchbox").searchFunctionCall({getParamList:null}) |
日期自定义
var options = { //查询事件 "search": function (paramList) { $("#customDate_searchbox_param").html('查询参数:'+JSON.stringify(paramList)); }, //默认展开条件数 "expandRow": 2, //查询条件 "searchBoxs": [ { "id": "CreatedTimeOne", "title": "日期定义", "type": "datetime", "data": [ { "value": "0", "text": "最近10分钟" }, { "value": "1", "text": "最近半小时"}, { "value": "2", "text": "最近1小时"}, { "value": "3", "text": "今天"}, { "value": "4", "text": "昨天"}, { "value": "5", "text": "最近3天"}, { "value": "6", "text": "最近7天"}, { "value": "7", "text": "最近15天" }, { "value": "8", "text": "最近30天"} ],"isShowAll": false,//是否显示全部 "defaults": ['0'], "custom": { "isRange": true, 'event': function (start, end) { if (!start || !end || start > end) { var id, tip ; if (!start) { tip = '开始日期必填'; id = "#searchitem_CreatedTimeOne_c_custom_start"; } else if (!end) { tip = '截止日期必填'; id = "#searchitem_CreatedTimeOne_c_custom_end"; } else { tip = '截止日期必须大于开始日期'; id = "#searchitem_CreatedTimeOne_c_custom_end"; } layer.tips(tip, id, { tips: 3 }); return false; } else { return true; } } } }, { "id": "CreatedTime", "title": "创建日期", "type": "datetime", "data": [ { "value": "0", "text": "最近10分钟" }, { "value": "1", "text": "最近半小时"}, { "value": "2", "text": "最近1小时"}, { "value": "3", "text": "今天"}, { "value": "4", "text": "昨天"}, { "value": "5", "text": "最近3天"}, { "value": "6", "text": "最近7天"}, { "value": "7", "text": "最近15天" }, { "value": "8", "text": "最近30天"} ], "custom": { 'event': function (start, end) { console.log(start); console.log(end); //返回false不会触发查询事件 return false; } } }, { "id": "Status_CustomDate", "title": "任务状态", "isMultiple":true, "data": [ { "value": "0", "text": "运行" }, { "value": "1", "text": "停止" } ] }, { "id": "Createor_CustomDate", "title": "创建人", "data": [ { "value": "admin", "text": "系统管理员" }, { "value": "zhangsan", "text": "张三" } ] } ] }; $("#customDate_searchbox").fiterMore(options); //自定义日期搜索初始化 $("#searchitem_CreatedTimeOne_c_custom_start").addClass("form-control layer-date"); $("#searchitem_CreatedTimeOne_c_custom_end").addClass("form-control layer-date"); //日期范围限制 var start = { elem: '#searchitem_CreatedTimeOne_c_custom_start', format: 'YYYY-MM-DD hh:mm:ss', max: laydate.now(), istime: true, istoday: true }; var end = { elem: '#searchitem_CreatedTimeOne_c_custom_end', format: 'YYYY-MM-DD hh:mm:ss', max: laydate.now(), istime: true, istoday: true }; laydate(start); laydate(end);演示地址:https://crazyjson.github.io/filterMore/demo/index.html#customDate 展开条件回调事件
var options = { //查询事件 "search": function (paramList) { }, //默认展开条件数 "expandRow": 1, //展开更多条件触发事件 "expandEvent": function (state) { //展开更多条件触发事件 参数：state true表示展开 false 收缩 $("#expandEvent_searchbox_param").html("是否展开条件:"+state); }, //查询条件 "searchBoxs": [ { "id": "Status_ExpandEvent", "title": "任务状态", "isMultiple":true, "data": [ { "value": "0", "text": "运行" }, { "value": "1", "text": "停止" } ] }, { "id": "Createor_ExpandEvent", "title": "创建人", "data": [ { "value": "admin", "text": "系统管理员" }, { "value": "zhangsan", "text": "张三" } ] } ] }; $("#expandEvent_searchbox").fiterMore(options);演示地址:https://crazyjson.github.io/filterMore/demo/index.html#expandEvent 默认值 演示地址:https://crazyjson.github.io/filterMore/demo/index.html#defaultValue 数据源格式自定义 演示地址:https://crazyjson.github.io/filterMore/demo/index.html#customData 方法调用 演示地址:https://crazyjson.github.io/filterMore/demo/index.html#functionCall 回到顶部https://github.com/CrazyJson/filterMore
在线演示地址: https://crazyjson.github.io/filterMore/demo/index.html
如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】按钮。
如果，您希望更容易地发现我的新博客，不妨点击一下绿。色通道的【关注我】。
因为，我的写作热情也离不开您的肯定支持。
感谢您的阅读，如果您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是焰尾迭 。