您现在的位置是:首页 > cms教程 > 易优cms教程易优cms教程

易优cms筛选标签Screening使用方法示例

文驹治2025-04-03易优cms教程已有人查阅

导读id='' 可以任意指定循环里的变量名替代field,假设id='field1',模板调用如:{$field.title} 变成 {$field1.title}typeid='' 专用于首页筛选,首页调用标签一定要指定栏目ID

[基础用法]
名称:screening
功能:筛选文章
语法:
{eyou:screening id='field' currentstyle='active' alltxt='不限' }
<div class="row">
<div class="filter-box">
<!-- 筛选项栏目循环 -->
{eyou:volist name='$field.list' id='vo'}
<div class="filter-boxs">
<!-- 筛选项标题 -->
<div class="filter-tit">
{$vo.title} :
</div>
<!-- 筛选的可选值循环 -->
<div class="filter-cen">
{eyou:volist name='$vo.dfvalue' id='val'}
<a {$val.onClick} class="{$val.currentstyle}">{$val.name}</a>
{/eyou:volist}
</div>
<!-- 筛选的可选值循环结束 -->
</div>
{/eyou:volist}
<!-- 筛选项栏目循环结束 -->
<!-- 清除所有筛选条件按钮 -->
<div class="filter-bt"><a href="{$field.resetUrl}">清除筛选条件</a></div>
</div>
<!-- 隐藏域 -->
{$field.hidden}
</div>
{/eyou:screening}
参数:
id='' 可以任意指定循环里的变量名替代field,假设id='field1',模板调用如:{$field.title} 变成 {$field1.title}
typeid='' 专用于首页筛选,首页调用标签一定要指定栏目ID
currentstyle='' 应用样式class类名
addfields='' 自定义字段名,多个字段之间用英文逗号隔开,比如:addfields='price,spce'
alltxt='' 筛选数值中的第一个自定义选项,该选项是用于重置单条筛选条件,比如:alltxt='全部',alltxt='不限',alltxt='所有'
empty='' 没有数据时显示的文案
底层字段:
请查阅易优Cms官方提供的数据字典,找到表名 ey_channelfield 、ey_article_content
-------------------------------效果展示--------------------------------
1,调用指定栏目文章
模板调用标准代码
{eyou:screening id='field' currentstyle='active' alltxt='全部'}
<div class="row">
<div class="filter-box">
{eyou:volist name='$field.list' id='vo'}
<div class="filter-boxs">
<div class="filter-tit">
{$vo.title} :
</div>
<div class="filter-cen">
{eyou:volist name='$vo.dfvalue' id='val'}
<a {$val.onClick} class="{$val.currentstyle}">{$val.name}</a>
{/eyou:volist}
</div>
</div>
{/eyou:volist}
<div class="filter-bt"><a href="{$field.resetUrl}">清除筛选条件</a></div>
</div>
{$field.hidden}
</div>
{/eyou:screening}
网站前端显示效果(css样式请自行填充)
【更多示例】
-------------------------------示例1--------------------------------
描述:指定自定义字段读取筛选条件
{eyou:screening id='field' currentstyle='active' addfields='danxuan' alltxt='不限'}
<div class="row">
<div class="filter-box">
{eyou:volist name='$field.list' id='vo'}
<div class="filter-boxs">
<div class="filter-tit">
{$vo.title} :
</div>
<div class="filter-cen">
{eyou:volist name='$vo.dfvalue' id='val'}
<a {$val.onClick} class="{$val.currentstyle}">{$val.name}</a>
{/eyou:volist}
</div>
</div>
{/eyou:volist}
<div class="filter-bt"><a href="{$field.resetUrl}">清除筛选条件</a></div>
</div>
{$field.hidden}
</div>
{/eyou:screening}
-------------------------------示例2--------------------------------
描述:关闭 “不限” 筛选按钮
{eyou:screening id='field' currentstyle='active' alltxt='off'}
<div class="row">
<div class="filter-box">
{eyou:volist name='$field.list' id='vo'}
<div class="filter-boxs">
<div class="filter-tit">
{$vo.title} :
</div>
<div class="filter-cen">
{eyou:volist name='$vo.dfvalue' id='val'}
<a {$val.onClick} class="{$val.currentstyle}">{$val.name}</a>
{/eyou:volist}
</div>
</div>
{/eyou:volist}
<div class="filter-bt"><a href="{$field.resetUrl}">清除筛选条件</a></div>
</div>
{$field.hidden}
</div>
{/eyou:screening}

本文标签:

很赞哦! ()

相关源码

  • 帝国CMS7.5漫画网站模板带手机端源码免费下载本模板为漫画内容平台设计开发,采用帝国CMS7.5内核构建,深度优化漫画作品展示结构与章节管理模式。前端采用响应式布局设计,适配各类漫画阅读场景,提供作品分类、连载追踪、热度排行等垂直领域功能模块。查看源码
  • (响应式)轴承机械五金零件产品pbootcms落地推广单页源码下载为轴承、机械零件等工业产品打造的响应式单页模板,基于PbootCMS内核开发,助力企业快速构建专业级产品展示页面。模板采用工业风设计语言,突出产品参数与性能优势,适用于设备制造商、零部件供应商等B2B场景推广。查看源码
  • (自适应响应式)HTML5甲醛环境检测网站模板带在线留言和资料下载本模板为甲醛检测与环保科技企业开发,采用PbootCMS内核构建。首页集成空气质量数据可视化模块,服务流程采用时间轴展示设计,检测报告板块支持PDF在线预览功能查看源码
  • (PC+WAP)历史复古古典古籍文章资讯类pbootcms模板下载本模板基于PbootCMS系统开发,为古籍研究、历史文献类网站设计,特别适合展示古典书籍、历史档案等文化内容。采用复古风格设计,同时具备现代化响应式布局,确保在PC和移动设备上都能呈现优雅的阅读体验。查看源码
  • (自适应响应式)高端家用办公家具家居桌椅pbootcms模板下载为办公家具企业设计的响应式网站模板,涵盖产品展示、案例呈现、企业介绍等核心模块。通过可视化后台可快速发布实木桌椅、系统家具、办公屏风等产品信息,帮助客户直观了解材质参数与空间搭配方案。查看源码
  • 工商注册财务代理记账类自适应pbootcms网站工商注册、财务代理记账企业打造的数字化门户模板,基于PbootCMS内核深度开发。采用前沿响应式架构,无缝适配手机端触控交互与PC端展示需求查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐