需求

• 实现如下图的组合搜索，根据用户选定的字段展示数据
  

思路

问题类型字段名称为 issues_type
状态字段名称为 status

1. 首先，要实现根据URL做筛选，筛选条件：根据用户通过GET传过来的参数实现， 例如用户访问地址为 http://127.0.0.1:8000/manage/10/issues/?status=1&status=2&issues_type=1，从中获取到 status=1&status=2&issues_type=1 ，在数据库中根据此条件进行筛选，并将数据展示出来。
2. 在CheckFilter类__iter__方法中，获取地址中的参数，如果此参数是data_list（数据库数据）中的某一项，那么我们给前端页面这一项的 checkbox 加一 checked 属性（打勾），并对 href 的地址进行修改，（此处要注意：对于URL的修改，要在当前URL参数的基础上再增加一项，而不是将原URL直接覆盖），最后通过 yield 返回。
3. 在前端页面中，通过 for 循环进行展示。

类中定义了 __iter__ 方法，且它返回一个迭代器。那么，我们称根据类创建的对象，为可迭代对象。

class CheckFilter(object): def __init__(self, name, data_list, request): """ :param name: 字段名称 :param data_list: 数据库数据 (('k': 'v'), ('k': 'v')) 类型 :param request: request参数 """ self.name = name self.data_list = data_list self.request = request def __iter__(self): for item in self.data_list: key = str(item[0]) text = item[1] ck = '' # 如果name在当前用户请求的URL中 value_list = self.request.GET.getlist(self.name) if key in value_list: ck = 'checked' value_list.remove(key) else: value_list.append(key) # 为自己生成URL # 在当前URL参数的基础上再增加一项 query_dict = self.request.GET.copy() query_dict._mutable = True query_dict.setlist(self.name, value_list) if 'page' in query_dict: query_dict.pop('page') param_url = query_dict.urlencode() if param_url: url = '{}?{}'.format(self.request.path_info, param_url) else: url = self.request.path_info tpl = "<a class='cell' href='{url}'><input type='checkbox' {ck} /><label>{text}</label></a>" html = tpl.format(url=url, ck=ck, text=text) yield mark_safe(html)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
 

后序

• 在页面点击的时候，我们是点击a标签进行跳转的，如果我们想通过点击checkbox也能实现跳转，就需要前端中给 checkbox 的 location.href 赋值为 a标签的 href

function bindClickCheckFilter() {
	$('.filter-area').find(':checkbox').click(function () {
		location.href = $(this).parent().attr('href');
	});
}

  

 

  
1
  
2
  
3
  
4
  
5
 

文章来源: ruochen.blog.csdn.net，作者：若尘，版权归原作者所有，如需转载，请联系作者。

原文链接：ruochen.blog.csdn.net/article/details/107740052