V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
KevinRed
V2EX  ›  程序员

多个无关联字段联动筛选解决方案

  •  
  •   KevinRed · 2020-03-27 12:04:13 +08:00 · 768 次点击
    这是一个创建于 1462 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文排版更清晰哦 => 多个无关联字段联动筛选解决方案

    原文排版更清晰哦 => 多个无关联字段联动筛选解决方案

    原文排版更清晰哦 => 多个无关联字段联动筛选解决方案


    开发中可能遇多个字段的联动筛选问题,与省市区这样的有关联联动不同,这些字段没有关联

    这样谁先谁后选择就会对联动产生影响,上级字段变动下级相应的也需要做联动

    此处提出解决方案,请大家指点,实现效果可以点击此处 无关联字段联动筛选示例

    主要思想是:

    1.分层级展示所有字段,每一字段都可以作为该层级的筛选条件

    2.当某层级字段 A 确定后隐藏其余字段和该层级以下的 A 字段

    3.当某层级字段 A 清空后,将该层级以及以下选择内容清空,展示出可选字段

    4.当某层级字段 A 变动后,将该层级以下选择内容清空,展示出可选字段

    5.字段筛选仅联动未选择字段

    可以使用一个栈,字段确定后入栈,如果有字段变动将该字段之后的全部出栈,清空对应选择数据

    接下来是实现代码,以无关联字段联动筛选示例实现为例

    前端代码

    涉及到的分页列表可以看 基于 ThinkPHP 和 Layui 的分页列表实现

    //html
    
    <form class="layui-form" action="">
    
        <for start="1" end="6">
            <div class="layui-form-item layui-row">
                <div class=" layui-col-md2 layui-col-sm2 layui-col-xs2" id="div-sex{$i}">
                    <label class="layui-form-label" id="label-sex{$i}">性别{$i}</label>
                    <div class="layui-input-block">
                        <select lay-filter="sex{$i}" name="sex{$i}" id="sex{$i}"></select>
                    </div>
                </div>
    
                <div class="layui-col-md2 layui-col-sm2 layui-col-xs2" id="div-birth{$i}">
                    <label class="layui-form-label" id="label-birth{$i}">生日{$i}</label>
                    <div class="layui-input-block">
                        <select lay-filter="birth{$i}" name="birth{$i}" id="birth{$i}"></select>
                    </div>
                </div>
    
                <div class=" layui-col-md2 layui-col-sm2 layui-col-xs2" id="div-place{$i}">
                    <label class="layui-form-label" id="label-place{$i}">住址{$i}</label>
                    <div class="layui-input-block">
                        <select lay-filter="place{$i}" name="place{$i}" id="place{$i}"></select>
                    </div>
                </div>
    
                <div class="layui-col-md2 layui-col-sm2 layui-col-xs2" id="div-look{$i}">
                    <label class="layui-form-label" id="label-look{$i}">长相{$i}</label>
                    <div class="layui-input-block">
                        <select lay-filter="look{$i}" name="look{$i}" id="look{$i}"></select>
                    </div>
                </div>
    
                <div class="layui-col-md2 layui-col-sm2 layui-col-xs2" id="div-income{$i}">
                    <label class="layui-form-label" id="label-income{$i}">收入{$i}</label>
                    <div class="layui-input-block">
                        <select lay-filter="income{$i}" name="income{$i}" id="income{$i}"></select>
                    </div>
                </div>
    
    
                <div class="layui-col-md2 layui-col-sm2 layui-col-xs2" >
    
                </div>
    
            </div>
        </for>
    
    
        <div class="layui-form-item layui-row">
            <div class="layui-col-md10 layui-col-sm10 layui-col-xs10" id="div-say">
                <label class="layui-form-label">宣言</label>
                <div class="layui-input-block">
                    <input sex="text" name="say" placeholder="请输入关键字" autocomplete="off" class="layui-input" id="say">
                </div>
            </div>
        </div>
    
    
    </form>
    
    //js
    
    var form, infos;
    var level = [];
    var keys = ['place', 'sex', 'birth', 'income', 'look'];
    var book = {'place' : '', 'sex' : '', 'birth' : '', 'income' : '', 'look' : ''};
    var map = {'place' : '住址', 'sex' : '性別', 'birth' : '生日', 'income' : '收入', 'look' : '长相'};
    
    $(function () {
        layui.use('form', function () {
            form = layui.form;
            
            //注册选择框监听事件
            for (var num = 1; num <= 5; num++) {
                for(var name of keys){
                    select(name, num);
                }
            }
        });
    
    
        //注册 input 框监听事件
        $('#say').on('input', function (data) {
            infos = $('#say').val().split(";");
            getData();
        });
        
        //获取筛选结果
        getData();
    });
    
    
    /__
     * 选择框监听
     * 
     * @param name 变动字段的名称
     * @param num  变动字段的层级
     */
    function select(name, num) {
        var select = "select(" + name + num + ")";
        form.on(select, function (data) {
            var select = "#" + name + num;
            var val = $(select).val();
    
            //某字段选择
            if(val !== ''){
            
                //字段变动
                if(book[name] !== ''){
                
                    //出栈
                    var empty = level.pop();
                    book[empty] = '';
                    while (empty !== name) {
                        var empty = level.pop();
                        book[empty] = '';
                    }
    
                    //入栈
                    book[name] = val;
                    level.push(name);
    
                    //还原字段
                    for (var i = num + 1; i <= 5; i ++) {
                        for (var key of keys) {
                            var div = "#div-" + key + i;
                            if (book[key] === '') {
                                $(div).css("display", "block");
                                var label = "#label-" + key + i;
                                $(label).html(map[key] + i);
    
                                var div = "#div-" + key + i;
                                $(div).removeClass("layui-col-md10 layui-col-sm10 layui-col-xs10");
                                $(div).addClass("layui-col-md2 layui-col-sm2 layui-col-xs2");
                            }
                        }
                    }
                    
                //字段首选
                } else{
                
                    //入栈
                    book[name] = val;
                    level.push(name);
                    
                    
                    //隐藏字段
                    for(var key of keys){
                        var div = "#div-" + key + num;
                        if (book[key] === '') {
                            $(div).css("display", "none");
                        }
                    }
                    var label = "#label-" + name + num;
                    $(label).html(map[name]);
                    var div = "#div-" + name + num;
                    $(div).removeClass("layui-col-md2 layui-col-sm2 layui-col-xs2");
                    $(div).addClass("layui-col-md10 layui-col-sm10 layui-col-xs10");
    
                    for (var i = num + 1; i <= 5; i++) {
                        var s = "#div-" + name + i;
                        $(s).css("display", "none");
                    }
                }
    
            //某字段清空
            }else{
                //出栈
                var empty = level.pop();
                book[empty] = '';
                while (empty !== name) {
                    var empty = level.pop();
                    book[empty] = '';
                }
                
                //还原字段
                for (var i = num; i <= 5; i ++) {
                    for (var key of keys) {
                        var div = "#div-" + key + i;
                        if (book[key] === '') {
                            $(div).css("display", "block");
                            var label = "#label-" + key + i;
                            $(label).html(map[key] + i);
                            var div = "#div-" + key + i;
                            $(div).removeClass("layui-col-md10 layui-col-sm10 layui-col-xs10");
                            $(div).addClass("layui-col-md2 layui-col-sm2 layui-col-xs2");
                        }
                    }
                }
            }
    
            getData();
        });
    }
    
    
    /__
     * 获取变动字段
     *
     */
    function getData() {
    
        if (book['sex'] === '') {
            getClass('sex');
        }
    
        if (book['place'] === '') {
            getClass('place');
        }
    
        if (book['birth'] === '') {
            getClass('birth');
        }
    
        if (book['income'] === '') {
            getClass('income');
        }
    
        if (book['look'] === '') {
            getClass('look');
        }
    
       
        getList(1, 50);        
    }
    
    /__
     * 筛选分类
     *
     * @param name
     */
    function getClass(name) {
        $.ajax({
            type: "post",
            url: "----/getClass",
            data: {
                "class": name,
                "sex": book['sex'],
                "place":  book['place'],
                "income":  book['income'],
                "look":  book['look'],
                "birth":  book['birth'],
                "says": infos
            },
            dataType: 'json',
            success: function (msg) {
                var data = msg.data;
                var len = data.length;
                var html = "<option value=\'\'></option>";
                for (var i = 0; i < len; i++) {
                    html += "<option value=\'" + data[i] + "\' >" + data[i] + "</option>";
                }
    
                for (var i = level.length + 1; i <= 6; i++) {
                    var s = "#" + name + i;
                    $(s).html(html);
                }
                
                //layui 表单需要刷新
                form.render('select');
    
            }
        })
    };
    

    后端代码

    //Controller 层
    
    public function getClass(){
    
        $sex = $_POST['sex'];
        $birth = $_POST['birth'];
        $income = $_POST['income'];
        $look = $_POST['look'];
        $place = $_POST['place'];
        $says = $_POST['says'];
    
        $where = array();
        if (!empty($sex)) {
            $where['sex'] = $sex;
        }
    
        if (!empty($birth)) {
            $where['birth'] = $birth;
        }
    
        if (!empty($income)) {
            $where['income'] = $income;
        }
    
        if (!empty($look)) {
            $where['look'] = $look;
        }
    
        if (!empty($place)) {
            $where['place'] = $place;
        }
    
        foreach($says As $say){
            if (!empty($say)) {
                $where['say'][] = array('like', '%' . $say . '%');
            }
        }
        if(!empty($where['say'])){
            $where['say'][] = 'and';
        }
    
    
        $data = D('filter')->getClass($where, $_POST['class']);
        ajaxReturn(1, "成功", $data);
    }
    
    //Model 层
    
    public function getClass($where, $class){
    
        $field = array("distinct " . $class);    
    
        $list = $this
                ->field($field)
                ->where($where)
                ->order($class)
                ->select();
        
        $data = array();
        foreach ($list As $item) {
            $data[] = $item[$class];
        }
        return $data;
    }
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1094 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:53 · PVG 02:53 · LAX 11:53 · JFK 14:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.