一、引子

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

  一行代表一个类别,第一行就是展示了所有的出版社,选中后就会以出版社分类,第二行就是以作者分类,当都选择了,就共同控制。此时选中了‘人民出版社’和‘余华’,数据就会以这两者共同过滤,当我们选择作家出版社时,人民出版社就会被取消,当我们选择某一类的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. MySQL配置文件优化(Innodb)

    Innodb配置文件参数调优 ——MySQL建议采用MySQL 5.6 InnoDB存储引擎 1.内存利用方面: innodb_buffer_pool_size ☆☆☆☆☆ Innodb优化首要参数. ...

  2. JavaScript基础视频教程总结(011-020章)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 第二节——vue多页面开发

    我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是.因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面. 但是v ...

  4. C#顺序表 & 单向链表(无头)

    C# 顺序表 非常标准的顺序表结构,等同于C#中的List<T>,但是List<T>在排错查询和数据结构替换上存在缺陷,一些情况会考虑使用自己定义的数据结构 1.优化方向 下表 ...

  5. ansible hosts文件编写,简单使用测试(普通用户、sudo用户、root用户登录权限测试)

    一.配置文件修改: 1.备份原配置文件: cp /etc/ansible/hosts /etc/ansible/hosts.bak 2.修改hosts配置文件: cat <<EOF> ...

  6. iOS逆向工程之Cycript

    1.连接设备 打开一个终端,输入指令: iproxy 重新打开一个新的终端,输入指令: ssh -p root@127.0.0.1 这时候会提示输入密码:默认密码为“alpine”.这样就可以连接到设 ...

  7. 二叉搜索树的平衡--AVL树和树的旋转

    二叉搜索树只有保持平衡时其查找效率才会高. 要保持二叉搜索树的平衡不是一件易事.不过还是有一些非常经典的办法可以做到,其中最好的方法就是将二叉搜索树实现为AVL树. AVL树得名于它的发明者 G.M. ...

  8. [UWP]不那么好用的ContentDialog

    ContentDialog是UWP开发中最常用的组件之一,一个体验良好的UWP应用很难避免不去使用它.博客园里也有许多的文章介绍如何来利用ContentDialog实现各种自定义样式的弹窗界面.不过实 ...

  9. unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl

    问题:unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl 解决:yum -y inst ...

  10. EJB3与JPA的关系

    转载自http://www.cnblogs.com/o-andy-o/archive/2012/04/17/2453537.html JPA是基于Java持久化的解决方案,主要是为了解决ORM框架的差 ...