js前端 多条件筛选查询

一、前言

　　在做项目中，遇到多条件筛选案例。实现完成以后，我将我做的代码分享在这里，希望可以帮助到其他朋友。

二、效果截图

三、实现代码

　　首先我先类型、类别、职位分成三块来处理，如果传到服务器端的话，就是三个参数。

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
}

四、结语

　　分享到这里结束，可能代码有点多不好看懂。不过没关系，有不懂的地方可以联系我，我们一起学习一起进步！