前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >django 基于yield可迭代对象实现CheckFilter组合搜索组件

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

原创
作者头像
ruochen
修改2021-05-13 14:32:52
5310
修改2021-05-13 14:32:52
举报

@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__ 方法,且它返回一个迭代器。那么,我们称根据类创建的对象,为可迭代对象。
代码语言:txt
复制
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
代码语言:txt
复制
function bindClickCheckFilter() {
	$('.filter-area').find(':checkbox').click(function () {
		location.href = $(this).parent().attr('href');
	});
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 后序
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档