找回密码
当前位置：前端开发者 > jQuery > 正文

基于 jQuery 交互式的多条件筛选插件

2018-07-02 分类：jQuery 阅读(754) 评论(0)

web前端微信开发|linux 前端开发工具|前端h5的开发工具

github传送门： https://github.com/WXAlbert/jquery-multiple-filter
html 代码

<style>
    .jmf-container {
        font-size: 16px;
        padding: 2px;
        border: 1px solid #e8e8e8;
    }
    .jmf-select-item,
    .jmf-select-result {
        position: relative;
        min-height: 34px;
        margin: 0;
        padding: 5px 112px 5px 120px;
        border-top: 1px dashed #dedede;
        overflow: hidden;
    }
    .jmf-select-result:first-child {
        border-top: 0;
    }
    .jmf-select-item>dt,
    .jmf-select-result>dt {
        position: absolute;
        left: 0;
        width: 120px;
        line-height: 24px;
        text-align: right;
        color: #999;
    }
    .jmf-select-item>dd,
    .jmf-select-result>dd {
        float: left;
        display: inline-block;
        margin: 0 10px;
        line-height: 24px;
    }
    .jmf-select-result>dd {
        margin: 0 5px;
    }
    .jmf-select-opesp {
        position: absolute;
        top: 0;
        right: 0;
        width: 112px;
    }
    .jmf-select-value {
        display: inline-block;
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    .jmf-select-value:hover {
        color: #f40;
    }
    .jmf-select-result>dt {
        margin-top: 3px;
    }
    .jmf-selected-item-rm {
        font-style: normal;
        position: absolute;
        right: 6px;
    }
    .jmf-selected-item {
        font-size: 14px;
        position: relative;
        margin-top: 4px;
        padding: 0 18px 0 4px;
        float: left;
        max-width: 144px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #e8e8e8;
        height: 20px;
        line-height: 20px;
        color: #666;
        text-decoration: none;
        cursor: pointer;
    }
    .jmf-selected-item:hover {
        border-color: #f40;
    }
    .jmf-selected-item:hover .jmf-selected-item-rm {
        color: #f40;
    }
    .jmf-btn-item-mtp {
        font-size: 14px;
        display: inline-block;
        margin-top: 6px;
        border: solid 1px #dad9d9;
        padding: 2px;
        color: #404040;
        cursor: pointer;
    }
    .jmf-btn-item-mtp:hover {
        color: #f40;
    }
    .jmf-item-input-ok {
        font-size: 14px;
        display: inline-block;
        line-height: 15px;
        margin-left: 5px;
        border: solid 1px #dad9d9;
        padding: 2px;
        color: #404040;
        cursor: pointer;
    }
    .jmf-item-input-ok:hover {
        color: #f40;
    }
    .jmf-togobtn {
        font-size: 14px;
        display: inline-block;
        border: solid 1px #e8e8e8;
        margin-top: 6px;
        padding: 0 9px;
        height: 24px;
        line-height: 24px;
        background: #f6f6f6;
        color: #6b6b6b;
        cursor: pointer;
        text-decoration: none;
    }
    .jmf-togobtn:hover {
        color: #f40;
    }
    .jmf-togobtn>span {
        display: block;
    }
    .jmf-togobtn.collapse>.collapse {
        display: none;
    }
    .jmf-togobtn.expand>.expand {
        display: none;
    }
    .jmf-items-container {}
    .jmf-items-container.expand {
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }
    .jmf-items-container.collapse {
        -webkit-animation: fadeOut 0.5s;
        animation: fadeOut 0.5s;
    }
</style>
<style>
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .fadeIn {
        -webkit-animation-name: fadeIn;
        -moz-animation-name: fadeIn;
        -o-animation-name: fadeIn;
        animation-name: fadeIn;
    }
    @-webkit-keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-moz-keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-o-keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    .fadeOut {
        -webkit-animation-name: fadeOut;
        -moz-animation-name: fadeOut;
        -o-animation-name: fadeOut;
        animation-name: fadeOut;
    }
</style>
<script src=”http://libs.baidu.com/jquery/1.11.1/jquery.min.js”></script>
<div id=”jmf”></div>
<script>
    (function ($, window) {
        ‘use strict’;
        window.jqMultipleFilter = window.jqMultipleFilter || jqMultipleFilter;
        function jqMultipleFilter(selector, config) {
            var $jqObj = $(selector),
                _config = $.extend(true, {
                    containerClass: ‘jmf-container’,
                    itemsContainerClass: ‘jmf-items-container’,
                    selItemClass: ‘jmf-select-item’,
                    selItemValClass: ”,
                    selItemOpespClass: ‘jmf-select-opesp’,
                    selResultClass: ‘jmf-select-result’,
                    selItemInputClass: ‘jmf-item-input’,
                    selItemInputOkClass: ”,
                    seldItemClass: ”,
                    seldItemRmClass: ‘jmf-selected-item-rm’,
                    togoBtnClass: ‘jmf-togobtn’,
                    data: [],
                    default: {},
                    expand: true,
                    onSelect: $.noop,
                    onRemove: $.noop
                }, config),
                _selItemVal = ‘jmf-select-value’,
                _selItemInputOk = ‘jmf-item-input-ok’,
                _seldItem = ‘jmf-selected-item’,
                $result = $(‘<dl>’).addClass(_config.selResultClass).append(
                    $(‘<dt>’).text(‘已选择条件：’)
                ),
                $itemsContainer = $(‘<div>’).addClass(_config.itemsContainerClass).addClass(_config.expand ? ‘expand’ : ‘collapse’),
                $jmfTogoBtn = $(‘<a>’).addClass(_config.togoBtnClass).addClass(_config.expand ? ‘expand’ : ‘collapse’).append(
                    $(‘<span>’).addClass(‘expand’).append(
                        $(‘<span>’).text(‘显示筛选’)
                    )
                ).append(
                    $(‘<span>’).addClass(‘collapse’).append(
                        $(‘<span>’).text(‘收起筛选’)
                    )
                );
            if ($jqObj.length === 0) {
                console.error(“jqMultipleFilter: can’t find this jquery object”);
            }
            var _this = new JqMultipleFilter();
            init();
            return _this;
            function init() {
                createDom();
                bind();
            }
            function createDom() {
                $result.append(
                    $(‘<div>’).addClass(_config.selItemOpespClass).append($jmfTogoBtn)
                );
                $jqObj.addClass(_config.containerClass);
                $jqObj.append($result);
                $.each(_config.data, function (dt_i, dt_o) {
                    var dt_html = dt_o.fieldText ? dt_o.fieldText : dt_o.field,
                        $dl = $(‘<dl>’).addClass(_config.selItemClass).append(
                            $(‘<dt>’).html(dt_html + ‘：’)
                        );
                    dt_o[‘index’] = dt_i;
                    dt_o[‘$$dl’] = $dl;
                    $dl.data(dt_o);
                    if (_config.default[dt_o.field]) {
                        _addSeldDom(dt_o, _config.default[dt_o.field]);
                    }
                    if (dt_o.type === ‘input’) {
                        $dl.append(
                            $(‘<dd>’).append(
                                $(‘<input>’).attr({
                                    type: ‘text’
                                }).addClass(_config.selItemInputClass).val(_config.default[dt_o.field] ? _config.default[dt_o.field] : ”)
                            ).append(
                                $(‘<a>’).addClass(_selItemInputOk).addClass(_config.selItemInputOkClass).text(‘确定’)
                            )
                        );
                    } else {
                        $.each(dt_o.items, function (itm_i, itm_o) {
                            var $seldItem = $(‘<a>’).addClass(_selItemVal).addClass(_config.selItemValClass),
                                seldTxt = itm_o.itemText ? itm_o.itemText : itm_o.item;
                            $seldItem.attr({ title: seldTxt }).html(seldTxt);
                            itm_o[‘index’] = itm_i;
                            $seldItem.data(itm_o);
                            $dl.append(
                                $(‘<dd>’).append($seldItem)
                            );
                        });
                    }
                    $itemsContainer.append($dl);
                });
                $jqObj.append($itemsContainer);
            }
            function bind() {
                // 选中[select]
                $jqObj.on(‘click’, ‘.’ + _selItemVal, function (e) {
                    // console.log(e.target);
                    var $this = $(this),
                        item_data = $this.parents(‘dl’).data(),
                        item_val_data = $this.data(),
                        item_val = item_val_data.item;
                    _addSeldDom(item_data, item_val);
                    _config.onSelect(getSelected(), item_data, item_val);
                });
                // 选中[input]
                $jqObj.on(‘click’, ‘.’ + _selItemInputOk, function (e) {
                    // console.log(e.target);
                    var $this = $(this),
                        item_data = $this.parents(‘dl’).data(),
                        item_val = $this.prev(‘input’).val();
                    if (item_val) {
                        _addSeldDom(item_data, item_val);
                    }
                    _config.onSelect(getSelected(), item_data, item_val);
                });
                // 删除
                $jqObj.on(‘click’, ‘.’ + _seldItem, function (e) {
                    var $this = $(this),
                        item_data = $this.data();
                    _config.data[item_data.index][‘$$dl’].show();
                    $this.parent(‘dd’).remove();
                    _config.onRemove(getSelected(), item_data);
                });
                // 折叠展开
                $jmfTogoBtn.bind(‘click’, function (e) {
                    $jmfTogoBtn.toggleClass(‘expand’).toggleClass(‘collapse’);
                    $itemsContainer.slideToggle(500, ‘swing’);
                    $itemsContainer.toggleClass(‘expand’).toggleClass(‘collapse’);
                });
            }
            function JqMultipleFilter() {
                this.$jqObj = $jqObj;
                this.config = _config;
                this.getSelected = getSelected;
                this.setSelected = setSelected;
                return this;
            }
            function getSelected() {
                var result = {};
                $.each($(selector + ‘ .’ + _seldItem), function (i, o) {
                    var data = $(o).data();
                    if (data.field) {
                        if (typeof data.value === ‘object’) {
                            result[data.field] = {
                                key: data.value.item,
                                value: data.value.itemText
                            };
                        } else {
                            result[data.field] = data.value;
                        }
                    }
                });
                return result;
            }
            function setSelected(seldData) {
                var oneSeld,
                    $resultItems = $result.children(‘dd’).children(‘a’);
                // 清空seld
                $.each($resultItems, function (i, o) {
                    var $o = $(o);
                    $o.remove();
                });
                $.each(_config.data, function (i, o) {
                    o.value = undefined;
                    o[‘$$dl’].show();
                });
                for (oneSeld in seldData) {
                    $.each(_config.data, function (i, o) {
                        if (o.field === oneSeld) {
                            _addSeldDom(o, seldData[oneSeld]);
                            return;
                        }
                    });
                }
            }
     /*
             * item_data: Object _config.data 行的数据
             * item_val: String select的key 或 input的value
             */
            function _addSeldDom(item_data, item_val) {
                var dt_html = item_data.fieldText ? item_data.fieldText : item_data.field,
                    $seldItemRm = $(‘<em>’).addClass(_config.seldItemRmClass).text(‘x’);
                // 字段类型为input
                if (_config.data[item_data.index][‘type’] === ‘input’) {
                    dt_html = dt_html + ‘：’ + item_val;
                    item_data[‘value’] = item_val;
                    // 默认字段类型为select，传入字段选中值的key
                } else {
                    $.each(_config.data[item_data.index].items, function (i, o) {
                        if (o.item === item_val) {
                            dt_html = dt_html + ‘：’ + (o.itemText ? o.itemText : o.item);
                            item_data[‘value’] = o;
                            return;
                        }
                    });
                }
                // 当setSeld的值没有匹配到备选值则跳过
                if (!item_data[‘value’]) {
                    return;
                }
                _config.data[item_data.index][‘$$dl’].hide();
                if (_config.data[item_data.index][‘type’] === ‘input’) {
                    _config.data[item_data.index][‘$$dl’].children(‘dd’).children(‘input’).val(item_val);
                }
                $result.append(
                    $(‘<dd>’).append(
                        $(‘<a>’).addClass(_seldItem).addClass(_config.seldItemClass).attr({ title: dt_html }).html(dt_html).data(item_data).append(
                            $seldItemRm
                        )
                    )
                );
            }
        }
        $.fn.jqMultipleFilter = function (config) {
            var $this = $(this);
            return jqMultipleFilter($this.selector, config);
        };
    })(jquery, window);
</script>
<script>
    $(function () {
        jfmObj = $(‘#jmf’).jqMultipleFilter({
            data: [
                {
                    type: ‘select’,
                    field: ‘hy’, fieldText: ‘行业’,
                    items: [
                        { item: ‘gc’, itemText: ‘工程’ },
                        { item: ‘gx’, itemText: ‘购销’ },
                        { item: ‘zl’, itemText: ‘租赁’ }
                    ]
                },
                {
                    type: ‘select’,
                    field: ‘lb’, fieldText: ‘类别’,
                    items: [
                        { item: ‘itb’, itemText: ‘IT采购(北京)’ },
                        { item: ‘ith’, itemText: ‘IT采购(杭州)’ },
                        { item: ‘itg’, itemText: ‘IT采购(广州)’ }
                    ]
                },
                {
                    type: ‘input’,
                    field: ‘khmc’, fieldText: ‘客户名称’
                },
                {
                    type: ‘input’,
                    field: ‘cpmc’, fieldText: ‘产品名称’
                }
            ],
            default: { hy: ‘gc’, khmc: ‘上海电力’, lb: ‘itb’ },
            onSelect: function (data, item, val) {
                console.log(data, item, val);
            },
            onRemove: function (data, item) {
                console.log(data, item);
            }
        });
    });
</script>

javaee是前端开发的吗|java 怎么实现前端开发|java可以做前端开发吗

赞(0)
前端开发者 » 基于 jQuery 交互式的多条件筛选插件
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论