保留原搜索条件组件
在写CRM系统的时候,保留原搜索条件经常应用上,故专门写一篇博客记录一下以方便以后再次运用的时候查看
- 问题需求
当我们的html页面中带有a标签的按钮时,我们点击后会跳转到新页面,这个新页面大多为添加、删除、修改操作,操作完成后会跳转回之前的页面,在之前的页面url中有可能伴随了GET参数,比如页码数或者其他搜索条件。
为了用户体验更好,我们在自动跳转回来的时候带上原来的GET参数就可以实现,例如我在第二页中点击的添加,添加完成后回来还是在第二页
实现原理
- 先判断GET中是否有参数
- 后端先获取url中的GET数据, 利用request.GET.urlencode() 方法
- 拿到数据后将数据设计城key 、values的形式 利用django的转译功能
- 将需要方向生成的url和打包好的数据进行拼接后放回给前端
实现所需知识点:
- request.GET.urlencode()
将GET参数中所有的键值转化为 query-string格式 (key=value&key=value), 对url的GET参数进行编码
- QueryDict(mutable=True)
在HttpRequest对象中,GET和POST属性都是一个django.http.QueryDict的实例化对象,所以需要修改或者更新url,我们就需要创建一个新的QueryDict对象
QueryDitct对象默认是不可变的,只读的。 所以request.GET和request. POST都是不可变的,如果需要修改它们,需要使用QueryDict.copy()方法
如果需要实例化可以修改的对象,需要添加 mutable=True 参数
实现代码:
1、我们先来看看request.GET.urlencode
1 def get_add_btn(self): 2 if self.has_add_btn: 3 name = '%s:%s' % (self.site.namespace, self.get_add_ur_name) 4 base_url = reverse(name) 5 if not self.request.GET: 6 add_url = base_url 7 else: 8 param_urlencode = self.request.GET.urlencode() # 通过urlencode方法将url中的数据作为一个整体拿到 9 param1_get = self.request.GET 10 print(param_urlencode) 11 print(param_get) 12 13 14 return '<a class="btn btn-primary">添加</a>'
输出:
pram_urlencode: page=2&a=2&b=3 pram_get: <QueryDict: {'page': ['2'], 'a': ['2'], 'b': ['3']}>
利用urlencode方法我们直接拿到里GET里的所有参数,如果不使用urlencode只会得到对象,无法将参数作为一个整体取到
2、我们接着来试验QueryDict方法
def get_add_btn(self): if self.has_add_btn: name = '%s:%s' % (self.site.namespace, self.get_add_ur_name) base_url = reverse(name) if not self.request.GET: add_url = base_url else: param = self.request.GET.urlencode() # 通过urlencode方法将url中的数据作为一个整体拿到 new_query_dict = QueryDict(mutable=True) # 新建一个空的QueryDict对象 new_query_dict['_filter'] = param print(new_query_dict)
输出:
<QueryDict: {'_filter': ['page=2&a=2&b=3']}>
从输出中看到我们得到了一个带有原搜索条件的QueryDict对象
3、拼接url
def get_add_btn(self): if self.has_add_btn: name = '%s:%s' % (self.site.namespace, self.get_add_ur_name) base_url = reverse(name) if not self.request.GET: add_url = base_url else: param = self.request.GET.urlencode() # 通过urlencode方法将url中的数据作为一个整体拿到 new_query_dict = QueryDict(mutable=True) # 新建一个空的QueryDict对象 new_query_dict['_filter'] = param add_url = '%s?%s' % (base_url, new_query_dict) print(add_url) return '<a class="btn btn-primary">添加</a>'
输出:
/stark/app01/userinfo/add/?<QueryDict: {'_filter': ['page=2&a=2&b=3']}>
我们从输出看到,通过拼接,我们将原本url和搜索条件拼接在了一起,只需要将QueryDict对象再次转译即可
4、最终版
def get_add_btn(self): if self.has_add_btn: name = '%s:%s' % (self.site.namespace, self.get_add_ur_name) base_url = reverse(name) if not self.request.GET: add_url = base_url else: param = self.request.GET.urlencode() # 通过urlencode方法将url中的数据作为一个整体拿到 new_query_dict = QueryDict(mutable=True) # 新建一个空的QueryDict对象 new_query_dict['_filter'] = param add_url = '%s?%s' % (base_url, new_query_dict.urlencode()) print(add_url) return '<a class="btn btn-primary" href="%s">添加</a>' % add_url
输出:
/stark/app01/userinfo/add/?_filter=page%3D2%26a%3D2%26b%3D3
需要注意的是,上述栗子是在类下面编写的,所以带有self,平时写在函数里大同小异,自己去理解吧