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

# cookie保存jquery点击结合drf实现多个条件组合过滤 ## html部分 ```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部分组成   ## 使用分析 当用户点击设备类型，调用`get_staff_devices_filter(param={'cat': '{{ item.num }}'})`方法，这个传递分类的id ```JavaScript //过滤设备类型或操作方式调用另一个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'))` ```JavaScript //根据类型号码生成型号选择列表 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); } } ```   点击设备型号，也会调用`get_staff_devices_filter(param={'md': '${device_model}', 'md_id': '${device_type_id}'})" id="id_md-${device_type_id}`传递相关的参数，后台根据这些参数请求过滤。 点击每一个按钮调用`change_filter_btn_style()`函数，标记按钮高亮（设置不行的class） ```JavaScript 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));` ```JavaScript //根据指定的数字，生成分页按钮 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中的值 ```JavaScript //将点击按钮的键值保存到cookie中 $.each(param, function (i) { let key = i; let value = param[i]; $.cookie(key, value); }); ``` 请求后台的时候，将这些值作为参数 ```JavaScript param = {'cat': $.cookie('cat'), 'md': $.cookie('md'), 'md_id': $.cookie('md_id'), 'op': $.cookie('op'), 'page': $.cookie('page')}; ``` 传入`$.get()`，得到返回值，从返回值中遍历渲染过滤结果。

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/82161242827b703e6acf9c726942a1e4/

很赞哦！ (0)