组合搜索_瀑布流

组合搜索

没有多对多的情况

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>学习视频列表</title>
 6     <style>
 7         .dd a{
 8             display: inline-block;
 9             padding: 5px 8px;
10             margin: 0 2px;
11             border: solid 1px;
12         }
13         .dd a.active{
14             background-color: antiquewhite;
15             color: white;
16         }
17     </style>
18 </head>
19 <body>
20     <div>
21         <h4>筛选条件</h4>
22         <div class="dd">
23             <div>
24                 {% if kw.vclass_id == 0 %}
25                     <a class="active" href="/video/study-0-{{ kw.vl_id }}-{{ kw.status }}/">全部</a>
26                 {% else %}
27                     <a href="/video/study-0-{{ kw.vl_id }}-{{ kw.status }}/">全部</a>
28                 {% endif %}
29 
30                 {% for foo in class_list %}
31                     {% if foo.id == kw.vclass_id %}
32 
33                         <a class="active" href="/video/study-{{ foo.id }}-{{ kw.vl_id }}-{{ kw.status }}/">{{ foo.name }}</a>
34                     {% else %}
35 
36                         <a href="/video/study-{{ foo.id }}-{{ kw.vl_id }}-{{ kw.status }}/">{{ foo.name }}</a>
37                     {% endif %}
38 
39                 {% endfor %}
40             </div>
41             <br>
42             <div>
43                 {% if kw.vl_id == 0 %}
44                     <a class="active" href="/video/study-{{ kw.vclass_id }}-0-{{ kw.status }}/">全部</a>
45                 {% else %}
46                     <a href="/video/study-{{ kw.vclass_id }}-0-{{ kw.status }}/">全部</a>
47                 {% endif %}
48 
49                 {% for level in level_list %}
50                     {% if level.id == kw.vl_id %}
51                         <a class="active" href="/video/study-{{ kw.vclass_id }}-{{ level.id }}-{{ kw.status }}/">{{ level.name }}</a>
52                     {% else %}
53                         <a href="/video/study-{{ kw.vclass_id }}-{{ level.id }}-{{ kw.status }}/">{{ level.name }}</a>
54                     {% endif %}
55 
56                 {% endfor %}
57                 
58             </div>
59             <br>
60             <div>
61                 {% if kw.status == 0 %}
62                     <a class="active" href="/video/study-{{ kw.vclass_id }}-{{ kw.vl_id }}-0/">全部</a>
63                 {% else %}
64                     <a href="/video/study-{{ kw.vclass_id }}-{{ kw.vl_id }}-0/">全部</a>
65                 {% endif %}
66 
67                 {% for status in status_dict %}
68                     {% if status.id == kw.status %}
69                         <a class="active" href="/video/study-{{ kw.vclass_id }}-{{ kw.vl_id }}-{{ status.id }}/">{{ status.name }}</a>
70                     {% else %}
71                         <a href="/video/study-{{ kw.vclass_id }}-{{ kw.vl_id }}-{{ status.id }}/">{{ status.name }}</a>
72                     {% endif %}
73 
74                 {% endfor %}
75 
76             </div>
77         </div>
78     </div>
79     <div>
80         <h4>筛选结果</h4>
81         {% for video in video_list %}
82                 <li>{{ video.name }}</li>
83         {% endfor %}
84 
85     </div>
86 </body>
87 </html>
前台html的实现
 1 from django.shortcuts import render,HttpResponse,redirect
 2 from django.views import View
 3 from app01 import models
 4 class Study(View):
 5     def get(self,request,*args,**kwargs):
 6         # print('aaaaaa',args)
 7         # print('kkkk',kwargs)
 8         condition_dict={}
 9         for k,v in kwargs.items():
10             kwargs[k]=int(v)
11             #过滤筛选条件
12             if int(v):
13                 condition_dict[k]=int(v)
14         print(condition_dict)
15         class_list=models.Classfication.objects.all()
16         level_list=models.Level.objects.all()
17         status_list=models.Video.status_choice
18         status_dict=map(lambda x:{'id':x[0],'name':x[1]},status_list)
19         video_list=models.Video.objects.filter(**condition_dict)
20         return render(request,'study/get_list_study.html',{'class_list':class_list,'level_list':level_list,'kw':kwargs,'status_dict':status_dict,'video_list':video_list})
后台的view部分的实现
1 from app01.views.study import Study
2 from django.urls import path,include
3 
4 urlpatterns = [
5     path('study-<int:vclass_id>-<int:vl_id>-<int:status>/',Study.as_view()),
6 ]
url路有部分

 有一个多对多的情况

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>学习视频列表</title>
 6     <style>
 7         .dd a{
 8             display: inline-block;
 9             padding: 5px 8px;
10             margin: 0 2px;
11             border: solid 1px;
12         }
13         .dd a.active{
14             background-color: antiquewhite;
15             color: white;
16         }
17     </style>
18 </head>
19 <body>
20     <div>
21         <h4>筛选条件</h4>
22         <div class="dd">
23             <div>
24                 {% if kwargs.dir_id == 0 %}
25                     <a class="active" href="/video/sm-0-{{ kwargs.vclass_id }}-{{ kwargs.status }}/">全部</a>
26                 {% else %}
27                      <a  href="/video/sm-0-{{ kwargs.vclass_id }}-{{ kwargs.status }}/">全部</a>
28                 {% endif %}
29                 {% for foo in direct_list %}
30                     {% if foo.id  == kwargs.dir_id %}
31                         <a  class="active" href="/video/sm-{{ foo.id }}-{{ kwargs.vclass_id }}-{{ kwargs.status }}/">{{ foo.name }}</a>
32                     {% else %}
33                         <a href="/video/sm-{{ foo.id }}-{{ kwargs.vclass_id }}-{{ kwargs.status }}/">{{ foo.name }}</a>
34                     {% endif %}
35                 {% endfor %}
36 
37             </div>
38             <br>
39             <div>
40                 {% if kwargs.vclass_id == 0 %}
41                     <a class="active" href="/video/sm-{{ kwargs.dir_id }}-0-{{ kwargs.status }}/">全部</a>
42                 {% else %}
43                      <a  href="/video/sm-{{ kwargs.dir_id }}-0-{{ kwargs.status }}/">全部</a>
44                 {% endif %}
45                 {% for class in class_list %}
46                     {% if class.id == kwargs.vclass_id %}
47                         <a  class="active" href="/video/sm-{{ kwargs.dir_id }}-{{ class.id }}-{{ kwargs.status }}">{{ class.name }}</a>
48                     {% else %}
49                         <a href="/video/sm-{{ kwargs.dir_id }}-{{ class.id }}-{{ kwargs.status }}">{{ class.name }}</a>
50                     {% endif %}
51 
52                 {% endfor %}
53 
54             </div>
55             <br>
56             <div>
57                 {% if kwargs.status == 0 %}
58                     <a class="active" href="/video/sm-{{ kwargs.dir_id }}-{{ kwargs.vclass_id }}-0/">全部</a>
59                 {% else %}
60                      <a  href="/video/sm-{{ kwargs.dir_id }}-{{ kwargs.vclass_id }}-0/">全部</a>
61                 {% endif %}
62                 {% for status in status_list %}
63                     {% if status.id == kwargs.status %}
64                         <a  class="active" href="/video/sm-{{ kwargs.dir_id }}-{{ kwargs.vclass_id }}-{{ status.id }}">{{ status.name }}</a>
65                     {% else %}
66                         <a href="/video/sm-{{ kwargs.dir_id }}-{{ kwargs.vclass_id }}-{{ status.id }}">{{ status.name }}</a>
67                     {% endif %}
68 
69                 {% endfor %}
70 
71             </div>
72         </div>
73     </div>
74     <div>
75         {% for video in video_list %}
76                 <li>{{ video.name }}</li>
77         {% endfor %}
78 
79     </div>
80 </body>
81 </html>
前台html的实现
 1 from django.shortcuts import render,HttpResponse,redirect
 2 from django.views import View
 3 from app01 import models
 4 class Study(View):
 5     def get(self,request,*args,**kwargs):
 6         # print('aaaaaa',args)
 7         # print('kkkk',kwargs)
 8         condition_dict={}
 9         for k,v in kwargs.items():
10             kwargs[k]=int(v)
11             #过滤筛选条件
12             if int(v):
13                 condition_dict[k]=int(v)
14         print(condition_dict)
15         class_list=models.Classfication.objects.all()
16         level_list=models.Level.objects.all()
17         status_list=models.Video.status_choice
18         status_dict=map(lambda x:{'id':x[0],'name':x[1]},status_list)
19         video_list=models.Video.objects.filter(**condition_dict)
20         return render(request,'study/get_list_study.html',{'class_list':class_list,'level_list':level_list,'kw':kwargs,'status_dict':status_dict,'video_list':video_list})
21 
22 class StudyMulity(View):
23     def get(self,request,*args,**kwargs):
24         #获取参数,
25         dir_id = int(kwargs['dir_id'])
26         vclass_id=int(kwargs['vclass_id'])
27         status=int(kwargs['status'])
28         #条件字典
29         condiction={}
30         #检索 方向 列表
31         direct_list = models.Direction.objects.all()
32         #构建video 的查询条件
33         if dir_id==0:
34             ##检索 分类 列表
35             class_list=models.Classfication.objects.all()
36             if vclass_id==0:
37                 pass
38             else:
39                 condiction['vclass_id']=vclass_id
40         else:
41             direct_obj=models.Direction.objects.filter(id=dir_id).first()
42             #检索分类列表
43             class_list=direct_obj.cla.all()
44             class_id=direct_obj.cla.all().values_list('id')
45             class_id_list=list(zip(*class_id))[0] if class_id else []
46             if vclass_id==0:
47                 condiction['vclass_id__in']=class_id_list
48             else:
49                 if vclass_id in class_id_list:
50                     condiction['vclass_id']=vclass_id
51                 else:
52                     #kwargs 中的 vclass_id 不在 direct 方向的 条件检索类表中   置为 0
53                     kwargs['vclass_id']=0
54                     condiction['vclass_id__in'] = class_id_list
55         if status==0:
56             pass
57         else:
58             condiction['status']=status
59         # 检索 上线状态 列表
60         status_list=map(lambda x:{'id':x[0],'name':x[1]},models.Video.status_choice)
61         video_list=models.Video.objects.filter(**condiction)
62         return render(request,'study/get_list_multy_study.html',{'direct_list':direct_list,'class_list':class_list,'status_list':status_list,'video_list':video_list,'kwargs':kwargs})
后台view部分的实现
1 from app01.views.study import Study,StudyMulity
2 from django.urls import path,include
3 
4 urlpatterns = [
5     path('study-<int:vclass_id>-<int:vl_id>-<int:status>/',Study.as_view()),
6     path('sm-<int:dir_id>-<int:vclass_id>-<int:status>/',StudyMulity.as_view()),
7 ]
url路由部分
 1 from django.db import models
 2 
 3 # Create your models here.
 4 class Level(models.Model):
 5     '''
 6     难度等级表
 7     '''
 8     name=models.CharField(max_length=32,verbose_name='难度级别')
 9     class Meta:
10         verbose_name_plural='难度'
11         db_table='Level'
12     def __str__(self):
13         return self.name
14 class Classfication(models.Model):
15     '''
16     视频类比表
17     '''
18     name=models.CharField(max_length=32,verbose_name='视频类别')
19     dir=models.ManyToManyField(to='Direction',related_name='cla')
20     class Meta:
21         verbose_name_plural='视频类别'
22         db_table='Classfication'
23     def __str__(self):
24         return self.name
25 class Direction(models.Model):
26     '''
27     视频方向表
28     '''
29     name=models.CharField(max_length=32,verbose_name='视频方向')
30     class Meta:
31         verbose_name_plural='视频方向'
32         db_table='Direction'
33     def __str__(self):
34         return self.name
35 class Video(models.Model):
36     status_choice=(
37             (1,'下线'),
38             (2,'上线')
39              )
40     status=models.IntegerField(choices=status_choice,default=1,verbose_name='上线状态')
41     name=models.CharField(max_length=32,verbose_name='视频名称')
42     vl=models.ForeignKey(to='Level',related_name='vi',on_delete=True)
43     vimg=models.CharField(max_length=64,verbose_name='图片')
44     vhttp=models.CharField(max_length=256,verbose_name='视频地址')
45     vclass=models.ForeignKey(to='Classfication',related_name='cv',blank=True,null=True,on_delete=True)
46     weight=models.IntegerField(default=0,verbose_name='权重(按从大到小排列)')
47     summary=models.CharField(max_length=256,blank=True,null=True,verbose_name='视频介绍')
48     create_time=models.DateTimeField(auto_now_add=True)
49 
50     class Meta:
51         verbose_name_plural='视频表'
52         db_table='Video'
53     def __str__(self):
54         return self.name
model部分

 瀑布流

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>美女图片</title>
 6     <style>
 7         .img-body{
 8             width:1500px;
 9             margin: 0 auto;
10         }
11         .item{
12             float: left;
13             width: 25%;
14 
15         }
16         .item img{
17             width: 100%;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="img-body">
23         <div class="item"></div>
24         <div class="item"></div>
25         <div class="item"></div>
26         <div class="item"></div>
27     </div>
28     <script src="/static/js/jquery-3.1.1.js"></script>
29     <script>
30         $(function () {
31             var obj = new ScrollImg();
32             obj.fetchImg();
33             obj.scrollEvent();
34 
35          });
36         function ScrollImg() {
37             this.NID = 0;
38             this.LASTPOSITION = -1;
39             this.fetchImg = function () {
40                 var that = this;
41                 $.ajax({
42                     url: '/video/img/',
43                     type: 'post',
44                     data: {nid: that.NID},
45                     dataType: 'JSON',
46                     success: function (arg) {
47                         var img_list = arg.data;
48                         $.each(img_list, function (index, v) {
49                             var eqv = (index + that.LASTPOSITION + 1) % 4;
50                             console.log(eqv);
51                             var tag = document.createElement('img');
52                             tag.src = '/' + v.src;
53                             $('.img-body').children().eq(eqv).append(tag);
54                             if (index + 1 == img_list.length) {
55                                 that.LASTPOSITION = eqv;
56                                 //that.NID = v.id;
57                             }
58                         })
59 
60                     }
61 
62                 })
63             };
64             this.scrollEvent = function () {
65             var that = this;
66             $(window).scroll(function () {
67 
68                 var scrollTop = $(window).scrollTop();
69                 var winHeight = $(window).height();
70                 var docHeight = $(document).height();
71                 if (scrollTop + 10+winHeight >= docHeight) {
72                     that.fetchImg();
73                 }
74             })
75              }
76 
77         }
78 
79     </script>
80 </body>
81 </html>
前台html 实现
 1 from django.shortcuts import render,HttpResponse,redirect
 2 from django.views import View
 3 from app01 import models
 4 import json
 5 class MyImg(View):
 6     def get(self,request):
 7         return render(request,'study/get_img.html')
 8     def post(self,request):
 9         img_list=list(models.Img.objects.values('id','src','name'))
10         response_dict={'status':True,'data':img_list}
11         return HttpResponse(json.dumps(response_dict))
后台view 实现
 1 from django.db import models
 2 class Img(models.Model):
 3     src=models.ImageField(upload_to='static/img/',verbose_name='图片地址')
 4     name=models.CharField(max_length=32,verbose_name='图片名')
 5     title=models.CharField(max_length=255,verbose_name='简介')
 6     class Meta:
 7         verbose_name_plural='图片'
 8         db_table='Img'
 9     def __str__(self):
10         return self.name
model 部分
原文地址:https://www.cnblogs.com/hexintong/p/9177932.html