php 自定义筛选功能

如上图功能，分类是通过栏目下面的关键词添加的

大概功能如下

1. 后台栏目设置筛选的选项，用逗号隔开

2. 产品编辑的时候显示当前父级栏目的选项

3. 勾选后的值逗号隔开，储存在产品的关键词字段中

4. 编辑产品的时候通过获取关键词分解，自动选中默认选项

5. 前台产品列表页面显示当前父栏目的选项

6. 勾选后筛选结果

7. 可以多选

模板修改内容

<tr><th>筛选分类：</th><td>
<style>
.attr {
display: inline-block;
padding: 5px 5px 5px 20px;
margin-right: 20px;
position: relative;
color:#666;
cursor: pointer;
}
.attr::after{
content: ' ';
position: absolute;
border: 1px solid #ccc;
width: 10px;
height: 10px;
left: 5px;
top: 5px;
}
.attr:hover {
background-color: #eee;
}
.attr-on {
color:#0a0a89;
}
.attr-on::after{
background-color: #0a0a89;
}
</style>
<?php
$ra=syDb('classtype')->findSql('select pid from dy_classtype where tid='.$carray['tid']);
$pid = $ra[0]['pid'];
$r=syDb('classtype')->findSql('select keywords from dy_classtype where tid='.$pid);
$attr = $r[0]['keywords'];
$attr = str_ireplace('，', ',', $attr); // 把全角逗号转为英文逗号
$arrts = explode(',',$attr);
//print_r($arrts);
foreach($arrts as $v){
?>
<a rel="<?php echo $v;?>" class="attr"><?php echo $v;?></a>
<?php
}
?>
<script type="text/javascript">
var xx = '';
var id = '';
// 选中后赋值到关键词文本框里面
$('.attr').live('click',function(){
$(this).toggleClass('attr-on');
$('.attr-on').each(function(i){
id = $(this).attr('rel');
xx = i>0 ? xx + ',' + id : id;
})
$('input[name="keywords"]').val(xx);
})

// 默认选中
setTimeout(function(){
sss = $('input[name="keywords"]').val()+',';
$('.attr').each(function(i){
ids = $(this).attr('rel');
if(sss.search(ids+",") != -1) $(this).toggleClass('attr-on');
})
},500)
</script>
</td></tr>

结果查询页面

url 形式： index.php?c=article&a=type&tid=80&key=300px,1080

php

// 筛选
$keys = $this->syArgs('key',1);
if($keys){
$fileall=explode(",",$keys);
$i = 0;
foreach($fileall as $v){
if($v){
if($i>0) {
$ss=$ss." or keywords like '%".$v."%'";
}
else
{
$ss=$ss."keywords like '%".$v."%'";
}
$i++;
}
}
$w.= ' and ('.$ss.')';
}

模板筛选选项显示

<style>
.tabs { margin-top: 20px;}
.attr {
display: inline-block;
padding: 5px 10px 5px 25px;
margin-right: 20px;
position: relative;
color:#666;
cursor: pointer;
}
.attr::after{
content: ' ';
position: absolute;
border: 1px solid #ccc;
width: 10px;
height: 10px;
left: 5px;
top: 10px;
}
.attr:hover {
background-color: #eee;
}
.attr-on {
color:#0a0a89;
}
.attr-on::after{
background-color: #0a0a89;
}
</style>
<div class="tabs">
<?php
//$ra=syDb('classtype')->findSql('select pid from dy_classtype where tid='.$type['tid']);
$pid = $type['pid'];
$r=syDb('classtype')->findSql('select keywords from dy_classtype where tid='.$pid);
$attr = $r[0]['keywords'];
$attr = str_ireplace('，', ',', $attr); // 把全角逗号转为英文逗号
$arrts = explode(',',$attr);
//print_r($arrts);
foreach($arrts as $v){
?>
<a rel="<?php echo $v;?>" class="attr"><?php echo $v;?></a>
<?php
}
?>
</div>
<script type="text/javascript">
var xx = '';
var id = '';
$('.attr').click(function(){
$(this).toggleClass('attr-on');
$('.attr-on').each(function(i){
id = $(this).attr('rel');
xx = i>0 ? xx + ',' + id : id;
})
window.location.href = "/index.php?c=article&a=type&tid={$type['tid']}&key=" + xx;
})

sss = "{$_GET['key']},";
$('.attr').each(function(i){
ids = $(this).attr('rel');
if(sss.search(ids+",") != -1) $(this).toggleClass('attr-on');
})
</script>