经验分享 – django 基于yield可迭代对象实现CheckFilter组合搜索组件

@toc

需求

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

    在这里插入图片描述

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

  • 首先,要实现根据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 ,在数据库中根据此条件进行筛选,并将数据展示出来。
  • CheckFilter__iter__方法中,获取地址中的参数,如果此参数是data_list(数据库数据)中的某一项,那么我们给前端页面这一项的 checkbox 加一 checked 属性(打勾),并对 href 的地址进行修改,(此处要注意:<font color=”red”>对于URL的修改,要在当前URL参数的基础上再增加一项,而不是将原URL直接覆盖</font>),最后通过 yield 返回。
  • 在前端页面中,通过 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也能实现跳转,就需要前端中给 checkboxlocation.href 赋值为 a标签的 href
function bindClickCheckFilter() {
	$('.filter-area').find(':checkbox').click(function () {
		location.href = $(this).parent().attr('href');
	});
}

正文完