js前端多條件篩選查詢

時間 2019-11-19

標籤前端條件篩選查詢欄目 JavaScript 简体版

原文原文鏈接

1、前言

　　在作項目中，遇到多條件篩選案例。實現完成之後，我將我作的代碼分享在這裏，但願能夠幫助到其餘朋友。html

2、效果截圖

3、實現代碼

　　首先我先類型、類別、職位分紅三塊來處理，若是傳到服務器端的話，就是三個參數。正則表達式

html部分：瀏覽器

<form action="@Url.Action()" method="get" id="formAction">

                <div class="type-table">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>類型：</td>
                            <td><span data-cate="all" data-type="type" class="active">所有</span> <span data-cate="qz" data-type="qz">全職</span> <span data-cate="jz" data-type="jz">兼職</span></td>
                        </tr>
                        <tr style="display:none;" id="qtqzNone"></tr>

                        <tr style="display:none" id="qtqz">
                            <td>類別：</td>
                            <td><span data-cate="all" data-category="category" class="active">所有</span> <span data-cate="mrmf" data-category="mrmf">美容/美髮</span> <span data-cate="bmys" data-category="bmys">保姆/月嫂</span> <span data-cate="dnit" data-category="dnit">電腦/IT</span> <span data-cate="bgwy" data-category="bgwy">辦公文員</span> <span data-cate="zsyl" data-category="zsyl">診所醫療</span> <span data-cate="yyy" data-category="yyy">營業員</span> <span data-cate="mj" data-category="mj">美甲</span> <span data-cate="sj" data-category="sj">司機</span> <span data-cate="yc" data-category="yc">衣產</span> <span data-cate="jbktv" data-category="jbktv">酒吧/KTV</span> <span data-cate="zx" data-category="zx">裝修</span> <span data-cate="qt" data-category="qt">其餘</span> </td>
                        </tr>

                        <tr style="display:none;" id="cyqzCate">
                            <td>類別：</td>
                            <td><span data-cate="all" data-category="category" class="active">所有</span> <span data-cate="zc" data-category="zc">中餐</span> <span data-cate="rc" data-category="rc">日餐</span> <span data-cate="fqg" data-category="fqg">夫妻工</span> <span data-cate="qtcy" data-category="qtcy">其餘餐飲</span></td>
                        </tr>
                        <tr style="display:none;" id="cyqzCates">
                            <td>職位：</td>
                            <td><span data-cate="jl" data-position="jl">經理</span> <span data-cate="jdh" data-position="jdh">接電話</span> <span data-cate="qt" data-position="qt">企臺</span> <span data-cate="dbdw" data-position="dbdw">打包/帶位</span> <span data-cate="kt" data-position="kt">看臺</span> <span data-cate="dc" data-position="dc">大廚</span> <span data-cate="cg" data-position="cg">炒鍋</span> <span data-cate="bc" data-position="bc">幫炒</span> <span data-cate="dz" data-position="dz">打雜</span> <span data-cate="yg" data-position="yg">油鍋</span> <span data-cate="sc" data-position="sc">送餐</span> <span data-cate="qt" data-position="qt">其餘</span></td>
                        </tr>

                    </table>
                </div>
                <div class="search">
                    <input type="hidden" name="cateId" value="@Request.QueryString["cateId"]" />
                    <input type="text" name="filter" value="@Request.QueryString["filter"]" placeholder="請輸入關鍵字" />
                    <input type="hidden" name="posParam" id="posParam" value="@Request.QueryString["posParam"]" />
                    <input type="hidden" name="cateParam" id="cateParam" value="@Request.QueryString["cateParam"]" />
                    <input type="hidden" name="typeParam" id="typeParam" value="@Request.QueryString["typeParam"]" />
                    <button type="submit">搜索</button>
                </div>

                <div class="area">
                    區域：<select id="AreaIds" name="AreaIds"></select>
                    <input id="areaId" name="areaId" type="hidden" value="@Request.QueryString["areaId"]" />
                </div>
            </form>

js部分：服務器

$(function () {
    /**類型 */
    var typeParam = []; /**類別*/
    var cateParam = []; /**職位 */
    var posParam = []; /**回填選中項*/    /*這裏我說明一下：這裏是咱們已經提交了參數，在從瀏覽器的 url 獲取參數，通 data-type 來回填該選項是不是選中*/
    var param = getUrlParam();
    if (param && param.typeParam) {
        typeParam = param.typeParam.split('A');
        for (var i = 0; i < typeParam.length; i++) {
            $('[data-type="' + typeParam[i] + '"]').addClass('active');
        }
        $('[data-type="type"]').removeClass('active');
    }

    if (param && param.cateParam) {
        cateParam = param.cateParam.split('A');
        for (var i = 0; i < cateParam.length; i++) {
            $('[data-category="' + cateParam[i] + '"]').addClass('active');
        }
        $('[data-category="category"]').removeClass('active');
    }

    if (param && param.posParam) {
        posParam = param.posParam.split('A');
        for (var i = 0; i < posParam.length; i++) {
            $('[data-position="' + posParam[i] + '"]').addClass('active');
        }
    }
/* 到這裏  回填結束 */

/**  這裏是選線的點擊事件   **/
    $(".type-table span").click(function () { var me = $(this); var type = me.attr('data-type'); var category = me.attr('data-category'); var position = me.attr('data-position'); var className = me.attr("class"); var cate = me.attr('data-cate'); /*類型判斷*/
        if (type != undefined) { if (type == "type") { $('.type-table [data-cate]').removeClass('active'); typeParam = []; } else { $('[data-type="type"]').removeClass('active'); if (className == 'active') { if (typeParam.indexOf(cate) > -1) typeParam.remove(cate); } else { if (typeParam.indexOf(cate) == -1) typeParam.push(cate); } } $("#typeParam").val(typeParam.toString().replace(re, "A")); } /*類別判斷*/
        if (category != undefined) { if (category == "category") { $('.type-table [data-category]').removeClass('active'); cateParam = []; } else { $('[data-category="category"]').removeClass('active'); if (className == 'active') { if (cateParam.indexOf(cate) > -1) cateParam.remove(cate); } else { if (cateParam.indexOf(cate) == -1) cateParam.push(cate); } } $("#cateParam").val(cateParam.toString().replace(re, "A")); } /*職位判斷*/
        if (position != undefined) { if (className == 'active') { if (posParam.indexOf(cate) > -1) posParam.remove(cate); } else { if (posParam.indexOf(cate) == -1) posParam.push(cate); } $("#posParam").val(posParam.toString().replace(re, "A")); } /************ 選項卡點擊事件結束 ****************/ if (className == 'active') {
            me.removeClass("active");
        } else {
            me.addClass("active");
        }

        var re = new RegExp(",", "g"); //定義正則表達式 這裏是我用來分隔參數用的
        if (typeParam.length > 0) {
            $("#typeParam").val(typeParam.toString().replace(re, "A"));
        }

        if (cateParam.length > 0) {
            $("#cateParam").val(cateParam.toString().replace(re, "A"));
        }

        if (posParam.length > 0) {
            $("#posParam").val(posParam.toString().replace(re, "A"));
        }

    });
});

Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};

Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

附件 getUrlParam() 方法實現代碼：主要是獲取 URL 中參數的 Key 和 value 學習

/**
 * 獲取瀏覽器參數
 * @param {any} url
 */
function getUrlParam(url) {
    var queryArr = (url && url.substr(url.indexOf('?') + 1).split('&')) ||
        location.search.substr(1).split('&'),
        query = {};
    for (var i = 0, len = queryArr.length; i < len; i++) {
        var key = queryArr[i].split('=')[0],
            val = queryArr[i].split('=')[1];
        if (query.hasOwnProperty(key)) {
            if (!Array.isArray(query[key])) {
                query[key] = [query[key]]
                query[key].push(val)
            } else {
                query[key].push(val)
            }
            continue
        }
        query[key] = val
    }
    return query
}