【TP5】對於廣告分類跟搜尋的解決方案
阿新 • • 發佈：2019-01-03
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"></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();
}