jquery结合cookie使用drf实现多个条件组合过滤

作者: 吾星喵 | 来源:发表于2019-05-31 20:45 被阅读0次

jquery结合cookie使用drf实现多个条件组合过滤
wireshark常用过滤规则
07 - shell之条件判断实战
cookie.js随记
django rest framework
jQueryMobile总结
多个条件的过滤如何实现
Scala 实用 Tips
ElasticSearch 使用详解：组合查询怎么玩
本地存储和以及cookie

cookie保存jquery点击结合drf实现多个条件组合过滤

html部分

<div class="col-sm-12">
    <!-- 横线导航 -->
    <div class="hr-line-dashed"></div>
    <p>
        <!-- 设备类型选择 -->
        <b><a class="btn disabled">设备类型：</a></b>
        <a class="btn btn-rounded btn-sm btn-default" style="border:none" onclick="get_staff_devices_filter(param={'cat': ''})" id="id_cat-" value="">全部</a>
        {% for item in device_categories %}
            <a class="btn btn-rounded btn-default btn-sm" style="border:none" value="{{ item.num }}" id="id_cat-{{ item.num }}" onclick="get_staff_devices_filter(param={'cat': '{{ item.num }}'})">{{ item.value }}</a>
        {% endfor %}
    </p>


    <p id="id_show_device_type" style="display: none;">
        <!-- 设备型号选择，只有当设备类型选择后可见 -->
    </p>
    <p>
        <!-- 操作方式 -->
        <b><a class="btn disabled">操作方式：</a></b>
        <a class="btn btn-rounded btn-sm btn-default" style="border:none" value="" onclick="get_staff_devices_filter(param={'op': ''})" id="id_op-">全部</a>
        {% for item in op_modes %}
            <a class="btn btn-rounded btn-sm btn-default" style="border:none" value="{{ item.id }}" id="id_op-{{ item.id }}" onclick="get_staff_devices_filter(param={'op': '{{ item.id }}'})">{{ item.op_mode }}</a>
        {% endfor %}
    </p>
    <div class="hr-line-dashed"></div>
</div>


<div style="display: none" id="id_df_page_filter">
    <button class="btn btn-white" onclick="get_staff_devices_filter(param={'page': '1'})" id="id_df_page_filter-1">1</button>
    <button class="btn btn-white" onclick="get_staff_devices_filter(param={'page': '2'})" id="id_df_page_filter-2">2</button>
</div>

以上由4部分组成

[图片上传失败...(image-f94731-1558529828190)]

[图片上传失败...(image-68df90-1558529828190)]

使用分析

当用户点击设备类型，调用get_staff_devices_filter(param={'cat': '{{ item.num }}'})方法，这个传递分类的id

//过滤设备类型或操作方式调用另一个api显示数据
function get_staff_devices_filter(param = {}) {
    console.log('过滤');
    $('#id_search_words').val('');  //搜索框置空

    //将点击按钮的键值保存到cookie中
    $.each(param, function (i) {
        let key = i;
        let value = param[i];
        $.cookie(key, value);
    });
    //console.log(param['page']);

    // 如果不是点击的分页，将cookie中的页面置为第1页，如果是点击的分页，则将分页号存储到cookie中
    if (param['page'] === undefined) {
        $.cookie('page', 1);
    } else {
        $.cookie('page', param['page']);
    }

    //点击设备类型时，设备型号从cookie中删除；然后根据类型，将型号添加到列表显示（点击类型的“全部”，型号就不显示）
    if (param['cat'] !== undefined) {
        $.cookie('md', '');
        //根据设备类型显示设备型号列表，只有点击了设备类型才执行更新
        generate_device_model($.cookie('cat'));
    }

    //请求后台的参数：设备类型、设备型号、型号id（用于型号列表高亮）、操作方式、分页
    param = {'cat': $.cookie('cat'), 'md': $.cookie('md'), 'md_id': $.cookie('md_id'), 'op': $.cookie('op'), 'page': $.cookie('page')};
    console.log(param);

    //从cookie中得到各类的值，切换改变按钮样式
    change_filter_btn_style();
    //切换两种分页按钮，显示全部数据的分页隐藏，显示过滤数据的分页按钮显示
    $("#id_df_page").hide();
    $("#id_df_page_filter").show();

    $.get("/assets/restapi/register/staff&device/filter/", param, function (data, status) {
        //生成分页按钮，并将当前页激活
        $('#id_df_page_filter').html(generate_page_range(is_filter = true, pages = data.pages));

        let results = data.results;
        //console.log(status);
        let html = '';
        $.each(results, function (staff_index, device) {
            // 遍历结果值，添加到html中
        $('#id_staff_devices_content').html(html)
    }).error(function (xhr, errorText, errorType) {
        //console.log(xhr.status);
        if (xhr.status === 404) {
            alert('没内容了，还翻啥翻~~')
        }
    })
}

如果点击的是设备型号按钮，也就会传一个cat关键字，当有这个关键字时，就会根据对应的在cookie中的值去从后端获取所有的设备型号generate_device_model($.cookie('cat'))

//根据类型号码生成型号选择列表
function generate_device_model(cat_num) {

    //console.log('生成设备型号列表');
    let html = '';
    if (cat_num !== '') {
        $("#id_show_device_type").hide(500);
        $.get('/assets/restapi/register/devicetype/?category=' + cat_num, function (data, status) {
            html += '<b><a class="btn disabled">设备型号：</a></b>';
            html += `<a class="btn btn-rounded btn-sm btn-default" style="border:none" onclick="get_staff_devices_filter(param={'md': '', 'md_id': ''})" id="id_md-">全部</a>`;
            $.each(data, function (idx, device_type) {
                //console.log(device_type);
                let device_model = device_type.device_model;
                let device_type_id = device_type.id;
                html += `<a class="btn btn-rounded btn-sm btn-default" style="border:none" onclick="get_staff_devices_filter(param={'md': '${device_model}', 'md_id': '${device_type_id}'})" id="id_md-${device_type_id}">${device_model}</a>`;
            });
            $('#id_show_device_type').html(html);
            $("#id_show_device_type").show(500);
        });
    } else {
        $("#id_show_device_type").hide(500);
    }
}

[图片上传失败...(image-7f8049-1558529846434)]

[图片上传失败...(image-3836e5-1558529846434)]

点击设备型号，也会调用get_staff_devices_filter(param={'md': '${device_model}', 'md_id': '${device_type_id}'})" id="id_md-${device_type_id}传递相关的参数，后台根据这些参数请求过滤。

点击每一个按钮调用change_filter_btn_style()函数，标记按钮高亮（设置不行的class）

function change_filter_btn_style() {
    //按钮颜色改变
    $('a[id^="id_cat"]').each(function () {
        let split_id = this.id.split('-')[1];
        if (split_id === $.cookie('cat')) {
            $(this).addClass('btn-info');
            $(this).removeClass('btn-default');
        } else {
            $(this).removeClass('btn-info');
            $(this).addClass('btn-default');
        }
    });
    $('a[id^="id_op"]').each(function () {
        let split_id = this.id.split('-')[1];
        if (split_id === $.cookie('op')) {
            $(this).addClass('btn-info');
            $(this).removeClass('btn-default');
        } else {
            $(this).removeClass('btn-info');
            $(this).addClass('btn-default');
        }
    });
    $('a[id^="id_md"]').each(function () { //这一段没有效果，对动态加载后的元素
        let split_id = this.id.split('-')[1];
        //console.log($.cookie('md_id'));
        if (split_id === $.cookie('md_id')) {
            $(this).addClass('btn-info');
            $(this).removeClass('btn-default');
        } else {
            $(this).removeClass('btn-info');
            $(this).addClass('btn-default');
        }
    });
}

请求到数据json后，根据结果中的页面大小，生成分页按钮列表$('#id_df_page_filter').html(generate_page_range(is_filter = true, pages = data.pages));

//根据指定的数字，生成分页按钮
function generate_page_range(is_filter = false, pages = 0) {
    let html = '';
    let filter = '';
    if (is_filter) {
        filter = '_filter';
    }
    for (let page = 1; page <= pages; page++) {
        if (page === Number($.cookie('page'))) {
            html += `<button class="btn btn-info active" onclick="get_staff_devices${filter}(param={'page': '${page}'})" id="id_df_page${filter}-${page}">${page}</button>`
        } else {
            html += `<button class="btn btn-white" onclick="get_staff_devices${filter}(param={'page': '${page}'})" id="id_df_page${filter}-${page}">${page}</button>`
        }
    }
    return html
}

总结

每次点击，更新cookie中的值

//将点击按钮的键值保存到cookie中
$.each(param, function (i) {
    let key = i;
    let value = param[i];
    $.cookie(key, value);
});

请求后台的时候，将这些值作为参数

param = {'cat': $.cookie('cat'), 'md': $.cookie('md'), 'md_id': $.cookie('md_id'), 'op': $.cookie('op'), 'page': $.cookie('page')};

传入$.get()，得到返回值，从返回值中遍历渲染过滤结果。

jquery结合cookie使用drf实现多个条件组合过滤
我的博客 cookie保存jquery点击结合drf实现多个条件组合过滤 html部分以上由4部分组成 [图片上...
wireshark常用过滤规则
可使用单个或多个过滤条件（可使用==，>=等），多个条件时使用and or进行连接 1.过滤IP，如来源IP或者目...
07 - shell之条件判断实战
组合命令使用控制符组合多个命令;&&|| 使用&&，||进行多个条件的判断[ 判断1 ] && [ 判断2 ][...
cookie.js随记
cookie: 使用jquery的插件:jquery.cookie.js库： jquery.js插件：jquer...
django rest framework
DRF安装 DRF配置 DRF基础过滤器 DRF的分页功能全局配置局部配置
jQueryMobile总结
jQuery Mobile Data属性按钮: 如果组合多个按钮,请使用带有data-role="control...
多个条件的过滤如何实现
使用js层层过滤，搞临时变量的数组，不段更新。
Scala 实用 Tips
1.多条件过滤使用尾递归的形式对给定值和多个 filter 条件来进行过滤，只要满足其一，即可返回 true 尾...
ElasticSearch 使用详解：组合查询怎么玩
查询是一个复杂过程，特别是当查询过程中有多个条件，在 ES 中当有多个条件的时候，就得使用组合查询了。组合查询是...
本地存储和以及cookie
一 . jquery.cookie插件操作的cookie: 1.cookie 网站，为了实现某些功能，把一些数据存...