您现在的位置是: 网站首页 >Django Django

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

admin2019年5月22日 20:52 Django | Html | JQuery | Python 258人已围观

# 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部分组成 ![BLOG_20190522_205342_10](/media/blog/images/2019/05/BLOG_20190522_205342_10.png "博客图集BLOG_20190522_205342_10.png") ![BLOG_20190522_205347_78](/media/blog/images/2019/05/BLOG_20190522_205347_78.png "博客图集BLOG_20190522_205347_78.png") ## 使用分析 当用户点击设备类型,调用`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); } } ``` ![BLOG_20190522_205401_44](/media/blog/images/2019/05/BLOG_20190522_205401_44.png "博客图集BLOG_20190522_205401_44.png") ![BLOG_20190522_205408_94](/media/blog/images/2019/05/BLOG_20190522_205408_94.png "博客图集BLOG_20190522_205408_94.png") 点击设备型号,也会调用`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()`,得到返回值,从返回值中遍历渲染过滤结果。

很赞哦! (0)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行687天
  • 系统信息:Linux
  • 后台程序:Python: 3.6.6
  • 网站框架:Django: 2.2.12
  • 文章统计:235 篇
  • 文章评论:40 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 公众号:微信扫描二维码,关注我们
  • QQ群:QQ加群,下载网站的学习源码
返回
顶部
标题 换行 登录
网站