django 基于yield可迭代对象实现CheckFilter组合搜索组件

需求

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

思路

问题类型字段名称为 ​​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)

后序

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

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