stark组件开发之组合搜索页面效果和 URL

最新推荐文章于 2024-05-21 14:54:17 发布

weixin_30404405

最新推荐文章于 2024-05-21 14:54:17 发布

阅读量65

点赞数

文章标签：数据库前端 python ViewUI

原文链接：http://www.cnblogs.com/chengege/p/10745830.html

版权

页面效果，只是样式。这个好解决！
yield 的时候。返回几个样式出去就好了！并且前端写上一些样式的css

        {% if search_group_row_list %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-filter" aria-hidden="true"></i> 快速筛选
                </div>
                <div class="panel-body">
                    <div class="search-group">
                        {% for row in search_group_row_list %}
                            <div class="row">
                                {% for obj in row %}
                                    {{ obj|safe }}
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}

模板代码

    def __iter__(self):
        '''默认显示。 用户可以自定制'''
        yield "<div class='whole'>"
        yield self.title
        yield "</div>"

        yield "<div class='others'>"
        yield "<a>全部</a>"
        for item in self.queryset_or_list:
            text = self.option.get_text_func(item)
            yield "<a href='#'>%s</a>" % text
        yield "</div>"

这样就可以了！ css 代码！看自己想要啥样的。
这里面最重要的，是 href 超链接属性。

这个属性有个要求是，组合搜索时，不能因为点击了一个标签，而把上一步点击过的标签给忘记掉。
用几个 url 来展示一下：

http://127.0.0.1:8000/stark/app01/userinfo/list/
http://127.0.0.1:8000/stark/app01/userinfo/list/?gender=1
http://127.0.0.1:8000/stark/app01/userinfo/list/?gender=1&classes=1
http://127.0.0.1:8000/stark/app01/userinfo/list/?gender=1&classes=1&depart=3

可以看得出的是，这个是 GET 请求。
每次请求的时候，这个url 都会携带上，上次的查询条件。

如何实现：

首先既然是查询，那么每次请求的时候，都会进入视图函数中。并且调用里面的方法，进而进入 __iter__ 来为这个 href 进行赋值

所以，要做的就是，当有请求来的时候。我就将 request.GET 中的请求信息，做一个修改。

这个键就是每个 field 对象的自己
他的值部分， choice就是元组中索引为 0 的值。如果是外键，那就是 field.pk 就能得到了！
request.GET 返回的是，一个 QueryDict 对象。并且他是默认不允许被修改的。所以需要对一个参数进行更改。

然后每次用户进行点击不同的按钮的时候，或发送不同的get 请求过来，但是 get 请求的键是固定的，我这里就只写了三个。
gender classes depart

既然 request.GET 返回的是，一个 QueryDict 对象。那么我就可以对这个字典的值，进行修改。但是键永远都是这三个：
看看实现的代码：

视图中每次请求都调用 option.get_queryset_or_list(self.model_class, request, *args, **kwargs)：

        # ####################7. 处理组合搜索###################
        search_group_row_list = []  # 修改之后这里
        search_group = self.get_search_group() # 这里接受的多个 Option 的实例化对象
        for option in search_group:
            queryset_or_list = option.get_queryset_or_list(self.model_class, request, *args, **kwargs)
            search_group_row_list.append(queryset_or_list)

Option 类中的 get_queryset_or_list。此函数又调用了 SearchGroupRow() 类。 (注意看参数的传入)

class Option(object):
    '''使用组合搜索， 想要一些自己的搜索条件。 可扩展可继承'''
    def __init__(self, field, db_condition=None, text_func=None, value_func=None):
        '''
        :param filed:  组合搜索关联的字段
        :param db_condition:  数据库关联查询时查询的条件
        :param text_func: 此函数用于，页面组合搜索的文本和样式
        '''
        self.field = field
        self.db_condition = db_condition
        self.text_func = text_func
        if not db_condition:
            db_condition = {}
        self.db_condition = db_condition

        self.is_choice = False  # 用于判断field对象里面是一个 choice列表 or 外键的queryset

    def get_value_func(self, field_obj):
        '''
        获取对象 id 的函数。(从)
        :param field_obj:  (1, "男")  or model对象
        :return:
        '''
        if self.text_func:
            return self.text_func(field_obj)

        if self.is_choice:
            return field_obj[0]
        return field_obj.pk

    def get_text_func(self, field_obj,):
        '''
        获取文本，的函数。(从)
        :param field_obj:  (1, "男")  or model对象
        :return:
        '''
        if self.text_func:
            return self.text_func(field_obj)

        if self.is_choice:
            return field_obj[1]
        return str(field_obj)

    def get_db_condition(self, request, *args, **kwargs):
        '''预留继承后的重写函数， 重写后，次基类中的该方法，将被覆盖。 默认返回的是开发者输入的值。'''
        '''重写后， 可根据，前端的返回值，进行一定的判断'''
        return self.db_condition

    def get_queryset_or_list(self, model_class, request, *args, **kwargs):
        '''根据字段去获取数据库关联的数据'''

        # 根据gender或者classes字符串，组自己对应的model类中，找到字段对象，再根据对象，获取关联的数据
        field_obj = model_class._meta.get_field(self.field)  # 固定用法mate 类，中的get_field() 就可以根据字符串获取对应的对象
        title = field_obj.verbose_name
        # 对field_obj 的类型做判断。 来确定他是一个 choice 还是一个 foreignkey 外键
        if isinstance(field_obj, ForeignKey) or isinstance(field_obj, ManyToManyField):
            # 获取关联表中的， 数据   django1.0 版本使用 field_obj.rel.model.objects.all()
            db_condition = self.get_db_condition(request, *args, **kwargs)
            return SearchGroupRow(field_obj.related_model.objects.filter(**db_condition), self, title, request.GET)
            # 这里得到的是 Queryset 类型
        else:
            # 获取 choice 的数据 field_obj.choices
            self.is_choice = True
            return SearchGroupRow(field_obj.choices, self, title, request.GET)  # 这里得到的是  tuple 类型

最后的SearchGroupRow类，进行标签的渲染

class SearchGroupRow(object):
    def __init__(self, queryset_or_list, option, title, query_dict):
        self.query_dict = query_dict  # request.GET
        self.title = title
        self.option = option
        self.queryset_or_list = queryset_or_list

    def __iter__(self):
        '''默认显示。 用户可以自定制'''
        # if isinstance(self.queryset_or_tuple, list):
        #     for item in self.queryset_or_tuple:
        #         yield "<a href='#'>%s</a>" % item[1]
        # else:
        #     for item in self.queryset_or_tuple:
        #         if isinstance(item, Model):
        #             print(item)
        #         yield "<a href='#'>%s</a>" % item
        yield "<div class='whole'>"
        yield self.title
        yield "</div>"

        yield "<div class='others'>"
        yield "<a>全部</a>"
        for item in self.queryset_or_list:
            text = self.option.get_text_func(item)

            # 需要request.GET
            query_dict = self.query_dict.copy()  # 做一次copy 不对原数据。在修改时造成影响
            query_dict._mutable = True  # QueryDict 默认不允许被修改。 添加这句就可以被修改了
            # 需要文本 背后的 id
            value = self.option.get_value_func(item)
            query_dict[self.option.field] = value
            yield "<a href='?%s'>%s</a>" % (query_dict.urlencode(), text)
        yield "</div>"

贴几张图片，技能很清除的。描述这里发生了什么：
首先是三组数据：分别是性别班级部门

看一看，他们在页面上的渲染：（这是没有get 参数。发送到数据库的时候）

我先点击一下男这个按钮：这里就能看出一些效果了。 a标签的 href 属性，变了。全部添加上了， gender=1

这次换成点击九年级一班：

这就不再继续，贴图片了！

每次点击之后，就会将这个 ? 之后的数据。全部发送到后台。之后的操作就是跟字典一样的更新赋值操作。

最后拼接的时候就是用 query_dict.urlencode 从这个字典中，取出这一串数据。拼接到 a 标签里面。
得到的效果就是这样了。

这里我也是想了，很久。这个使用的方式，真实微妙。好用的很。

最后一点就是，关于选中的样式问题，和全部按钮的问题！
对于选中的，我们应该加一个样式。未选中的是另一个样式：

这里做一个判断就好了！
request.GET 中的数据，我们能得到，就在 querydict。
而当前 field 对象的id value = self.option.get_value_func(item) 这个方式也已经获取到了！
然后就是做判断：

    def __iter__(self):
        yield "<div class='whole'>"
        yield self.title
        yield "</div>"

        yield "<div class='others'>"
        yield "<a>全部</a>"
        for item in self.queryset_or_list:
            text = self.option.get_text_func(item)

            # 需要request.GET
            query_dict = self.query_dict.copy()  # 做一次copy 不对原数据。在修改时造成影响
            query_dict._mutable = True  # QueryDict 默认不允许被修改。 添加这句就可以被修改了
            # 需要文本 背后的 id
            value = self.option.get_value_func(item)
            origin_value_list = query_dict.getlist(self.option.field)  # 获取当前访问数据的
            query_dict[self.option.field] = value  # 更新当前访问数据的
　　　　　　　　# 这两部操作， 不要顺序倒了。 否则就没效果了！
            if str(value) in origin_value_list:
　　　　　　　　　query_dict.pop(self.option.field)  # 这个就是判断如果当前请求没有变化。就从请求中删除掉这个数据
                yield "<a class='active' href='?%s'>%s</a>" % (query_dict.urlencode(), text)
            else:
                yield "<a href='?%s'>%s</a>" % (query_dict.urlencode(), text)
        yield "</div>"

转载于:https://www.cnblogs.com/chengege/p/10745830.html

weixin_30404405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
stark组件开发之组合搜索页面效果和 URL

页面效果，只是样式。这个好解决！yield 的时候。返回几个样式出去就好了！并且前端写上一些样式的css {% if search_group_row_list %} <div class="panel panel-default"> <div class="panel-headi...
复制链接

扫一扫