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

约定不等于承诺〃 2023-03-04 06:56 8阅读 0赞

###  ###

*  需求
 *  思路
 *  后序

# 需求 #

*  实现如下图的组合搜索，根据用户选定的字段展示数据  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70]

# 思路 #

> 问题类型字段名称为 `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');
    	});
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70]: /images/20230208/bd624b680f3041b3b44d99952aa487e1.png