一言不合就動手系列篇一-仿電商平臺前端搜索插件(filterMore)

時間 2019-11-08

標籤一言不合動手系列平臺前端搜索插件 filtermore 简体版

原文原文鏈接

　　話說某年某月某日，後臺系統須要重構，當時公司尚未專業前端，由我負責前臺頁面框架搭建，作事後臺系統的都知道，傳統的管理系統大部分都是列表界面和編輯界面。列表界面又由表格和搜索框組成，css

對於所有都是輸入框的搜索條件開發起來很簡單，用戶體驗上卻差不少。開始了漫漫尋找尋插件之路，最終無果。一言不合決定參考互聯網風格的篩選條件本身動手仿造一款插件。html

最終filterMore誕生了,源代碼已開源至GitHub:https://github.com/CrazyJson/filterMore前端

閱讀目錄jquery

回到頂部

插件介紹

　目地git

fiterMore是本人開源的第一框前端插件，基於bootstrap部分樣式，旨在幫助開發者輕鬆實現現代化風格的篩選條件。參考某東，某寶的篩選條件。github

　特性json

首款開源篩選插件
參數配置項多，功能強大
輕量級(8k)
支持全部流行的瀏覽器

插件來源bootstrap

在開發該插件前，本着拿來主義的精神，尋找了不少前端插件庫，沒有找到相似插件。只能本身動手，通過差很少一年的項目檢驗，足步完善，自認爲已經比較成熟。她儘量地在以更少的代碼展示更強健的功能，且格外注重性能的提高、易用和實用性。固然，這種「王婆賣瓜」的陳述聽起來老是有點難以難受，所以你須要進一步瞭解她是否真的如你所願。瀏覽器

回到頂部

參數說明

參數名	字符類型	釋義說明	默認值	使用頻率
初始化參數大全
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);

View Code

演示地址: 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);