一、引子

  在我们浏览很多页面时,会发现一般情况下都有一个分类的功能,而且还是多个类别同时控制,这就是多级过滤。如下图:

  一行代表一个类别,第一行就是展示了所有的出版社,选中后就会以出版社分类,第二行就是以作者分类,当都选择了,就共同控制。此时选中了‘人民出版社’和‘余华’,数据就会以这两者共同过滤,当我们选择作家出版社时,人民出版社就会被取消,当我们选择某一类的all时,这一类的其他被选中的就会被取消。

  首先在starkmodel有个filter_list列表,这个是包含总共有哪些类别。

  二、代码

  从要实现的效果来看,除了每行的第一个,其他所有的都应该是a标签。如果是单级过滤的话,每个a标签的路径可以写死。但现在是多级过滤,a标签的路径就只能是动态的,所谓的动态,无非是在自己的固有过滤条件上再加上已经选中的其他类别的过滤条件。效果是这样的。当我们第一次进入页面时,没有选中任何过滤条件,每个a标签就是自己的固有过滤条件;当我们点击‘人民出版社’时,就发送了请求,此时后台就要重构a标签的路径了,出版社下的a标签不用改动,作者下的a标签就要在自己的固有过滤条件下加上本次请求的过滤条件,这样才能在点击‘余华’的时候既有‘人民出版社’,还会有‘余华’两个过滤条件。

  每一行的all就是把跟自己属于同一类的过滤条件给去掉就行了。

  sites.py:

class Show(object):
def show_filter(self):
filter_dict={}
for field in self.config_obj.filter_list: #循环配置类的filter_list,取出需要进行分类的字段
filter_list = []
params=copy.deepcopy(self.request.GET) #params是本次请求的条件
if params.get('page'): #这是把页码的过滤条件给去了
params.pop('page')
if params.get(field): #这是把当前字段的过滤条件给去了,因为params要给all使用
params.pop(field)
filter_list.append('<a class="btn-sm btn-default" href="?%s">all</a>'%params.urlencode()) #这是构造每一行的all标签
field_obj=self.config_obj.model._meta.get_field(field) #filter_list列表里面存放的是字符串,通过这方法拿到字符串对应的字段对象
if field_obj.choices: #字段对象存在是choices,直接拿就行
data=field_obj.choices #此时得到的数据是元祖套元祖类型的
else: #该字段对象不存在choices
rel_model=field_obj.remote_field.model #拿到该字段对象对应的模型类
data=rel_model.objects.all() #得到的数据就是模型类的所有对象
for obj in data:
if type(obj) == tuple: #如果是元祖类型,直接解包
pk,text=obj
else: #如果不是元祖类型,说明是一个对象,我们拿到对象的pk值和名字就行
pk,text=obj.pk,obj
params[field]=pk #我们把pk值放入到params中去
if self.request.GET.get(field)==str(pk): #构造all后面的a标签
filter_list.append('<a class="btn-sm btn-default active" href="?%s">%s</a>'%(params.urlencode(),text))
else:
filter_list.append('<a class="btn-sm btn-default" href="?%s">%s</a>'%(params.urlencode(), text))
filter_dict[field]=filter_list
return filter_dict -------------------------------得到的filter_dict-----------------------------------------------------------------

{'publish': ['<a class="btn-sm btn-default" href="?author=2">all</a>', '<a class="btn-sm btn-default active" href="?author=2&publish=1">人民出版社</a>', '<a class="btn-sm btn-default" href="?author=2&publish=2">作家出版社</a>', '<a class="btn-sm btn-default" href="?author=2&publish=3">天天出版社</a>']}
{'publish': ['<a class="btn-sm btn-default" href="?author=2">all</a>', '<a class="btn-sm btn-default active" href="?author=2&publish=1">人民出版社</a>', '<a class="btn-sm btn-default" href="?author=2&publish=2">作家出版社</a>', '<a class="btn-sm btn-default" href="?author=2&publish=3">天天出版社</a>'], 'author': ['<a class="btn-sm btn-default" href="?publish=1">all</a>', '<a class="btn-sm btn-default" href="?publish=1&author=1">路遥</a>', '<a class="btn-sm btn-default active" href="?publish=1&author=2">余华</a>', '<a class="btn-sm btn-default" href="?publish=1&author=3">杨绛</a>']}

  前端页面代码:

<div class="filter">
{% if show.config_obj.filter_list %}
{% for field,obj_list in show.show_filter.items %}
<span class="btn btn-success">{{ field }}</span>
{% for obj in obj_list %}
{{ obj|safe }}
{% endfor %}
<br>
{% endfor %}
{% endif %}
</div>

stark组件之多级过滤的更多相关文章

  1. stark组件之创建

    stark组件之需求 仿照Django中的admin , 开发了自己的stark组件,实现类似数据库客户端的功能,对数据进行增删改查 . stark之创建 1.在项目中 创建stark应用,app01 ...

  2. django-admin 仿写stark组件action,filter筛选过滤,search查询

    写在StandLi里面的方法都是通过ModelSubject这个类里面的stand_li方法,在它里面用StandLi这个类实例化出来一个对象,这个实例化出来的对象把数据传给前端HTML模板进行渲染, ...

  3. day 69crm(6) stark组件 action 和 多层过滤效果

      前情提要: 今天学的是stark 组件的 action  和多层过效果 一: action (自定制函数多选功能效果) 1: 学习 观点明确:     2: 多选效果前端和后端进行的操作   2& ...

  4. 【django之stark组件】

    一.需求 仿照django的admin,开发自己的stark组件.实现类似数据库客户端的功能,对数据进行增删改查. 二.实现 1.在settings配置中分别注册这三个app # Applicatio ...

  5. django 之 stark组件

    ----------------------------------------------------------------烦恼没完没了,内心动荡不安,呜呼哀哉. 一.有个特殊的需求,需要用sta ...

  6. 24.stark组件全部

    admin组件: 博客里面的图片的是在太难弄了,有大哥会弄给我贴一片博客,我一个一个加太累了,没有加 admin参考:https://www.cnblogs.com/yuanchenqi/articl ...

  7. stark组件的分页,模糊查询,批量删除

    1.分页组件高阶 2.整合展示数据showlist类 3.stark组件之分页 3.stark组件之search模糊查询 4.action批量处理数据 4.总结 1.分页组件高阶 1.分页的class ...

  8. stark组件之分页【模仿Django的admin】

    我们的stark组件用的我们的分页组件,没有重新写 下面直接看下分页的代码 class page_helper(): def __init__(self, count, current_page, p ...

  9. stark组件之搜索【模仿Django的admin】

    一.先看下django的admin是如何做搜索功能的 配置一个search_fields的列表就可以实现搜索的功能 class testbook(admin.ModelAdmin): # 第一步,定义 ...

随机推荐

  1. 简单利用jQuery,让前端开发不再依赖于后端的接口

    前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景: 接口没写好,没法做接下来的功能 功能写好了,接口没写好,没法测这个功能 联调了,出了BUG,不知道锅在谁身上,只得陪后端耗时 ...

  2. 20175316盛茂淞 2018-2019-2 《Java程序设计》第5周学习总结

    20175316盛茂淞 2018-2019-2 <Java程序设计>第5周学习总结 教材学习内容总结 第六章 接口与实现. 何谓接口 接口:书上没有明确地给出接口的定义,我理解的接口就是一 ...

  3. 2nd week

    <!DOCTYPE html> <html> <head> <title>用户登录.html</title> <meta http-e ...

  4. 学习tableauhttps://www.tableau.com/zh-cn/learn/training

    入门教程不错: https://www.tableau.com/zh-cn/learn/training

  5. WPF 通过线程使用ProcessBar

    WPF下使用进度条也是非常方便的,如果直接采用循环然后给ProcessBar赋值,理论上是没有问题的,不过这样会卡主主UI线程,我们看到的效果等全部都结束循环后才出现最后的值. 所以需要采用线程或者后 ...

  6. JVM活学活用——调优工具

    概述 工具做为图形化界面来展示更能直观的发现问题,另一方面一些耗费性能的分析(dump文件分析)一般也不会在生产直接分析,往往dump下来的文件达1G左右,人工分析效率较低,因此利用工具来分析jvm相 ...

  7. 前置知识: FactoryBean的作用

    FactoryBean 简介 FactoryBean是Spring中一种特殊的Bean,是用于创建Bean对象的,最大的作用便是可以让我们自定义Bean的创建过程.如果你在XML配置文件配置了一个节点 ...

  8. 14:IO之字符字节流

    字节流: InputStream     OutputStream  字节流:  FileInputStream FileOutputStream BufferedInputStream Buffer ...

  9. 你不知道的console调试

    概述 浏览器的开发者工具我们经常用,console.log我们也经常用,但是console还有其它一些方便调试的命令,我总结了几个常用的记录在下面,供以后开发时参考,相信对其他人也有用. 获取js执行 ...

  10. Spark基础脚本入门实践3:Pair RDD开发

    Pair RDD转化操作 val rdd = sc.parallelize(List((1,2),(3,4),(3,6))) //reduceByKey,通过key来做合并val r1 = rdd.r ...