• 组合搜索_瀑布流


    组合搜索

    没有多对多的情况

     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 部分
  • 相关阅读:
    使 Inno Setup 打包出的安装程序以管理员身份运行
    SQL SERVER 数据库被标记为“可疑”的解决办法
    SQL SERVER 查看数据库信息
    【转】如何正确地处理时间
    如何获取 XAML 控件的模板代码
    Asp.Net MVC 把PartialView、View转换成字符串
    表达式树在LINQ动态查询
    ASP.NET MVC5 实现分页查询
    WPF
    正则表达式定义
  • 原文地址:https://www.cnblogs.com/hexintong/p/9177932.html
Copyright © 2020-2023  润新知