【TP5】对于广告分类跟搜索的解决方案

author：咔咔

wechat：fangkangfk

需求：点击广告分类，在点击查询，需要查询本分类下的广告

首先我们需要固定的就是样式问题

第一次进入的时候显示的是全部的广告，那么我们的全部广告就需要被点击的样式，所以我们直接就给全部广告加了一个checked

点击全部广告是不需要条件的，所有地址没有追加参数

点击其他的广告分类，带上各自在数据库的标识，然候使用参数传递给后台

同样后台也会接收这个参数，去数据库查询

由于是a链接跳转，所以我们使用addClass的方式是肯定不行的，这个时候就需要后台传递参数给前端，然候根据这个值进行判断点击的是那个

现在点击分类的业务处理好了，还需要处理查询时查询当下分类的数据

我们就需要在点击查询的form表单里边放置一个隐藏域，并且name值需要跟点击广告追加的参数名相同，这个隐藏域的value值，同样是不可以直接使用attr的方式添加，所以依然使用后台传递的方式

这样在点击查询的时候就会将这个条件带上

下来我们做一个测试

我们设置了俩条banner数据，但是标题不一样

 点击banner

查询kak

结果：

前端代码

      {include file="../../../application/admin/view/public/head" /}
      <style>
         .layui-badge-rim{
             margin: 0 30px;
          }
         .type{
             margin: 50px 50px 50px 10px;
             background-color: #009818;
          }
         .checked{
             background-color: #666;
          }
      </style>
      <form class="layui-form " method="post">
          {if condition="isset($showType)"}
         <a class="layui-btn mgl-20 type" attr="1" href="{:url('index')}"> 全部广告</a>
      <a class="layui-btn mgl-20 type {if condition='$showType eq 1'} checked {/if}" attr="1" href="{:url('index')}?showType=1"> Banner广告</a>
      <a class="layui-btn mgl-20 type {if condition='$showType eq 2'} checked {/if}" attr="2" href="{:url('index')}?showType=2"> 专题广告</a>
      <a class="layui-btn mgl-20 type {if condition='$showType eq 3'} checked {/if}" attr="3" href="{:url('index')}?showType=3"> 详情页广告</a>
      <a class="layui-btn mgl-20 type" attr="4" href="{:url('index')}"> 启动页广告</a>
          {else if}
         <a class="layui-btn mgl-20 type checked" attr="1" href="{:url('index')}"> 全部广告</a>
         <a class="layui-btn mgl-20 type" attr="1" href="{:url('index')}?showType=1"> Banner广告</a>
         <a class="layui-btn mgl-20 type " attr="2" href="{:url('index')}?showType=2"> 专题广告</a>
         <a class="layui-btn mgl-20 type " attr="3" href="{:url('index')}?showType=3"> 详情页广告</a>
         <a class="layui-btn mgl-20 type" attr="4" href="{:url('index')}"> 启动页广告</a>
          {/if}
      </form>
      <div class="page-container p10">
         <form class="layui-form " method="post" id="pageListForm">
             <div class="layui-input-inline w150">
                 <div class="layui-btn-group">
                     <a data-full="1" data-href="{:url('addBanner')}" class="layui-btn layui-btn-primary j-iframe"><i class="layui-icon">&#xe654;</i>添加广告</a>
                 </div>
             </div>
              {if condition="isset($showType)"}
             <!--存放点击的类型-->
             <input type="hidden" id="showType" name="showType" value="{$showType}">
              {/if}
             <div class="layui-input-inline w150">
                 <select name="vt_id" class="vt_id">
                     <option value="">视频类型</option>
                      {foreach name='subject' item='v'}
                      {if condition="isset($param['vt_id'])"}
                     <option {if condition="$param['vt_id'] eq $v['vt_id']"} selected {/if} value="{$v['vt_id']}" >{$v['vt_name']}</option>
                      {else if /}
                     <option value="{$v['vt_id']}" >{$v['vt_name']}</option>
                      {/if}
                      {/foreach}
                 </select>
             </div>
             <div class="layui-input-inline">
                 <input type="text" autocomplete="off" placeholder="请输入广告名" id="content" class="layui-input" name="b_title" value="{$param['b_title']?$param['b_title']:''}">
             </div>
             <button class="layui-btn mgl-20 .j-kaka" id="query"> 查询</button>
             <table class="layui-table" lay-size="sm">
             <thead>
                 <tr >
                     <th >ID</th>
                     <th >标题</th>
                     <th >分类</th>
                     <th >对应视频名</th>
                     <th >展示类型</th>
                     <th >排序</th>
                     <th >操作</th>
                 </tr>
             </thead>
                  {foreach name='bannerList' item='v'}
                 <tr height="50">
                     <th>{$v['b_id']}</th>
                     <td>{$v['b_title']}</td>
                     <td>{$v['banner_type']['vt_name']}</td>
                     <td>{$v['banner_vs_video_name']['vi_title']}</td>
                      {if condition="$v['b_showType'] eq 1"}
                     <td>banner广告</td>
                      {/if}
                      {if condition="$v['b_showType'] eq 2"}
                     <td>专题</td>
                      {/if}
                      {if condition="$v['b_showType'] eq 3"}
                     <td>详情页</td>
                      {/if}
                     <td>{$v['b_sort']}</td>
                     <td width="500">
                         <a class="layui-badge-rim j-iframe" width="100" data-full="1" data-href="{:url('editBanner?b_id='.$v.b_id)}" href="javascript:;" title="编辑">编辑</a>
                         <a class="layui-badge-rim del" data-id="{$v.b_id}" data-href="" href="javascript:;" title="删除">删除</a>
                     </td>
                 </tr>
                  {/foreach}
             </table>
         </form>
      </div>
      <div id="pages" class="center"></div>
      {include file="../../../application/admin/view/public/foot" /}
      <script type="text/javascript">
          layui.use(['jquery',], function(args){
             var $= layui.jquery;
              $('.type').click(function () {
                 var showType = $(this).attr('attr');
                 alert(showType)
                  $('#showType').val(showType);
              })
          });
         // 点击删除
          $(document).on('click','.del',function(){
             var that = $(this),
                  href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href');
              layer.confirm('删除之后无法恢复，您确定要删除吗？', {title:false, closeBtn:0}, function(index){
                 if (!href) {
                      layer.msg('请设置data-href参数');
                     return false;
                  }
                  $.get(href, function(res){
                      layer.msg(res.msg);
                     if (res.code == 1) {
                          that.parents('tr').remove();
                      }
                  });
                  layer.close(index);
              });
             return false;
          })
         /**
       * 更改数据顺序
       */
          layui.use('laypage', function(){
             var laypage = layui.laypage
                  , layer = layui.layer,
                  $ = layui.$;
              $(document).on('blur','.sort',function(){
                 var that = $(this),
                      b_sort = that.val();
                 var b_id = that.attr('b_id');
                  $.post("{:url('banner/editSort')}",{b_sort:b_sort,b_id:b_id},function(res){
                     if(res == 1){
                         loadData()
                      }
                  });
              })
          });
      </script>
      </body>
      </html>
  
 

后台代码：

         /**
       * banner列表
       * @return array
       */
         public function index()
          {
             $param = $this->request->param();
             $where = [];
             if(!empty($param['vt_id'])){
                 $where['vt_id'] = $param['vt_id'];
              }
             if(!empty($param['b_title'])){
                 $where['b_title'] = ['like',"%".$param['b_title']."%"];
              }
             if(!empty($param['showType'])){
                 $where['b_showType'] = $param['showType'];
              }
             if(!empty($param['vt_id']) && !empty($param['b_targetType']) && !empty($paran['b_title'])){
                 $where = '1 = 1';
              }
             // banner列表
             $bannerList = $this->bannerModel->bannerList($where);
             // 类型
             $videoTypeList = Db::name($this->videoTypeModel->tableName)->select();
             if(!empty($param)){
                 $this->assign('param',$param);
              }
             if(!empty($param['showType'])){
                 $this->assign('showType',$param['showType']);
              }
             $this->assign([
                 'subject' => $videoTypeList,
                 'bannerList' => $bannerList,
              ]);
             return $this->fetch();
          }
  
 

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/85323349