专栏首页.net core新时代一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)

一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)

  话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面。列表界面又由表格和搜索框组成,

    对于全部都是输入框的搜索条件开发起来很简单,用户体验上却差很多。开始了漫漫寻找寻插件之路,最终无果。一言不合决定参考互联网风格的筛选条件自己动手仿造一款插件。

 最终filterMore诞生了,源代码已开源至GitHub:https://github.com/CrazyJson/filterMore

阅读目录

回到顶部

插件介绍

  目地

       fiterMore是本人开源的第一框前端插件,基于bootstrap部分样式,旨在帮助开发者轻松实现现代化风格的筛选条件。参考某东,某宝的筛选条件。

  特性

  1. 首款开源筛选插件
  2. 参数配置项多,功能强大
  3. 轻量级(8k)
  4. 支持所有流行的浏览器

     插件来源

      在开发该插件前,本着拿来主义的精神,寻找了很多前端插件库,没有找到类似插件。只能自己动手,经过差不多一年的项目检验,足步完善,自认为已经比较成熟。 她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性。当然,这种“王婆卖瓜”的陈述听起来总是有点难以难受,因此你需要进一步了解她是否真的如你所愿。

回到顶部

参数说明

初始化参数大全

参数名

字符类型

释义说明

默认值

使用频率

searchBoxs

Array

筛选条件项,详情参见searchBoxs参数大全

null

必须

search

function

查询事件,回调函数参数paramList为筛选条件

null

常用

expandRow

integer

展开筛选条件行数

2

常用

expandEvent

function

展开更多条件触发事件 参数:state true表示展开 false 收缩 一般可用来改变表格高度

null

常用

paramkey

string

参数收集时返回值的Key

ValueList

不常用

paramCustomkey

string

参数收集时自定义条件返回值的Key

CustomList

不常用

searchOnSelect

boolean

点击选项时是否触发查询事件

true

不常用

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})

回到顶部

使用案例

 基本例子

//引用css
<link rel="stylesheet" href="https://crazyjson.github.io/filterMore/dist/css/fiterMore.min.css">
//页面使用一个占位Div
<div class="searchbox" id="basic_searchbox"></div>
//引用js
<script src="jquery-1.11.1.min.js"></script>
<script src="https://crazyjson.github.io/filterMore/dist/filterMore.min.js"></script>

 初始化

 var options = {
            //查询事件
            "search": function (paramList) {
                $("#basic_searchbox_param").html('查询参数:'+JSON.stringify(paramList));
            },
            //默认展开条件数
            "expandRow": 2,
            //查询条件
            "searchBoxs": [
                {
                    "id": "Status_Basic",
                    "title": "任务状态",
                    "isMultiple":true,
                    "data": [
                        { "value": "0", "text": "运行" },
                        { "value": "1", "text": "停止" }
                    ]
                },
                {
                    "id": "Createor_Basic",
                    "title": "创建人",
                    "data": [
                        { "value": "admin", "text": "系统管理员" },
                        { "value": "zhangsan", "text": "张三" }
                    ]
                }
            ]
        };
        $("#basic_searchbox").fiterMore(options);

  演示地址:https://crazyjson.github.io/filterMore/demo/index.html#basic

  日期自定义

 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

回到顶部

总结

  开源插件filterMore介绍完成,插件BUG或者建议的可以联系我。

    GitHub地址 : https://github.com/CrazyJson/filterMore

  在线演示地址:  https://crazyjson.github.io/filterMore/demo/index.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数据字典生成工具之旅(1):开篇有益

           最近在做公司需求的时候,发现一个很低效的点,在建表的时候需要使用公司自己开发的建模工具进行创建表,一个字段一个字段的复制粘贴让人受不了。于是萌发了...

    用户1168362
  • 使用工具安装,运行,停止,卸载Window服务

    WSWinForm.exe介绍       WSWinForm.exe是我自己开发的一个实用的小工具,用于将任何EXE程序作为Windows服务运行。也就是说W...

    用户1168362
  • 数据字典生成工具之旅(4):NPOI操作EXECL

           这篇会介绍NPOI读写EXECL,读写EXECL的组件很多,可以使用微软自己的COM组件EXECL.exe读写,不过这种方式限制很大。      ...

    用户1168362
  • 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    官方介绍: 博客皮肤模板 http://skintemplate.cnblogs.com/

    Enjoy233
  • 每个优秀程序员必须具备的技术技能

    我特别支持软件开发者在他们掌握技术技能的同时去学习“软技能”——事实上,我写了一本关于这方面的书——但是不可否认的是:技术技能很重要。

    哲洛不闹
  • PPT背景图怎么换?学会这两招就够了

    1、点击进入“插入”界面,然后点击“形状”选择“矩形”。然后在幻灯片中插入一个矩形,将矩形调整至与幻灯片一致大小。

    高效办公
  • 那些年遇到的bug(2)

    bug系列又出炉了,过来瞧瞧啦 1、webview常出现的问题 之前android虚拟机一直都可以直接联网,今天写了一个WebView之后,突然报出了...

    用户1337002
  • 2019年中国HR SaaS行业研究报告

    ? 来源:艾瑞咨询(ID:iresearch-) ---- HR SaaS丨研究报告 全文字数:5491字 精读时间:18分钟 核心摘要: 概念界定: HR ...

    腾讯SaaS加速器
  • HR SaaS走出混战格局,迈向一体化、智能化新阶段

    ? 来源:艾瑞咨询 ---- HR SaaS丨研究报告 全文字数:5491字 精读时间:14分钟 核心摘要: 概念界定: HR SaaS基于人力资源管理方法论...

    腾讯SaaS加速器
  • 每个优秀程序员必须具备的技术技能

    我特别支持软件开发者在他们掌握技术技能的同时去学习“软技能”——事实上,我写了一本关于这方面的书——但是不可否认的是:技术技能很重要。 我的意思是,如果你不能编...

    李海彬

扫码关注云+社区

领取腾讯云代金券