screening 文檔篩選

[基礎(chǔ)用法]
標(biāo)簽:screening
描述:用于在列表頁文檔篩選場景(支持文章、產(chǎn)品、視頻、圖集以及自定義等模型)
用法:
{eyou:screening id='field' currentclass='active' alltxt='不限' }
    <div class="row">
        <div class="filter-box">
            <!-- 篩選項欄目循環(huán) -->
            {eyou:volist name='$field.list' id='vo'}
                <div class="filter-boxs">
                    <!-- 篩選項標(biāo)題 -->
                    <div class="filter-tit">
                        {$vo.title} : 
                    </div>
                     <!-- 篩選的可選值循環(huán) -->
                    <div class="filter-cen">
                        {eyou:volist name='$vo.dfvalue' id='val'}
                            <a {$val.onClick} class="{$val.currentclass}">{$val.name}</a>&nbsp;
                        {/eyou:volist}
                    </div>
                    <!-- 篩選的可選值循環(huán)結(jié)束 -->
                </div>
            {/eyou:volist}
            <!-- 篩選項欄目循環(huán)結(jié)束 -->
            <!-- 清除所有篩選條件按鈕 -->
            <div class="filter-bt"><a href="{$field.resetUrl}">清除篩選條件</a></div>
        </div>
        <!-- 隱藏域 -->
        {$field.hidden}
    </div>
{/eyou:screening}

 

屬性:
id='' 可以任意指定循環(huán)里的變量名替代field,假設(shè)id='field1',模板調(diào)用如:{$field.title} 變成 {$field1.title}
typeid='' 專用于首頁篩選,首頁調(diào)用標(biāo)簽一定要指定欄目ID
currentclass='' 應(yīng)用樣式class類名
addfields='' 自定義字段名,多個字段之間用英文逗號隔開,比如:addfields='price,spce'
alltxt='' 篩選數(shù)值中的第一個自定義選項,該選項是用于重置單條篩選條件,alltxt='off' 表示不顯示,其他文案顯示比如:alltxt='全部',alltxt='不限',alltxt='所有'
empty='' 沒有數(shù)據(jù)時顯示的文案
涉及表字段:

請查閱易優(yōu)數(shù)據(jù)字典,找到表名 ey_channelfield  、ey_article_content

-------------------------------效果預(yù)覽--------------------------------

 官方的源碼頻道也用到,如圖所示

image.png

-------------------------------效果展示--------------------------------
1,調(diào)用指定欄目文章
模板html代碼:
{eyou:screening id='field' currentclass='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.currentclass}">{$val.name}</a>&nbsp;
                        {/eyou:volist}
                    </div>
                </div>
            {/eyou:volist}
            <div class="filter-bt"><a href="{$field.resetUrl}">清除篩選條件</a></div>
        </div>
        {$field.hidden}
    </div>
{/eyou:screening}
網(wǎng)站前端顯示效果(css樣式請自行填充)


【更多示例】

-------------------------------示例1--------------------------------
描述:指定自定義字段讀取篩選條件
{eyou:screening id='field' currentclass='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.currentclass}">{$val.name}</a>&nbsp;
                        {/eyou:volist}
                    </div>
                </div>
            {/eyou:volist}
            <div class="filter-bt"><a href="{$field.resetUrl}">清除篩選條件</a></div>
        </div>
        {$field.hidden}
    </div>
{/eyou:screening}
 
-------------------------------示例2--------------------------------
描述:關(guān)閉 &ldquo;不限&rdquo; 篩選按鈕
{eyou:screening id='field' currentclass='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.currentclass}">{$val.name}</a>&nbsp;
                        {/eyou:volist}
                    </div>
                </div>
            {/eyou:volist}
            <div class="filter-bt"><a href="{$field.resetUrl}">清除篩選條件</a></div>
        </div>
        {$field.hidden}
    </div>

{/eyou:screening}


-------------------------------示例3--------------------------------
描述:三級區(qū)域聯(lián)動篩選

{eyou:screening id='field' currentstyle='active' }

{eyou:volist name='$field.list' id='vo'}

    <dl class="clearfix">

        <dt class="text-main">{$vo.title}:</dt>

        <dd>

            <div class="filter-nav">

                <ul>

                    {eyou:volist name='$vo.dfvalue' id='val'}

                    <li><a {$val.onClick} class="radius-rounded {$val.currentstyle}">{$val.name}</a></li>

                    {/eyou:volist}

                </ul>

            </div>

        </dd>

    </dl>

    <!-- 二級輸出標(biāo)簽,未選擇一級時隱藏 -->

    {eyou:volist name='$vo.dfvalue' id='val'}

    {notempty name="$val.twoLevelArr"}

        <dl class="clearfix">

            <dt class="text-main">城市:</dt>

                <dd>

                    <div class="filter-nav">

                        <ul>

                            {eyou:volist name='$val.twoLevelArr' id='two'}

                            <li><a {$two.onClick} class="radius-rounded {$two.currentstyle}">{$two.name}</a></li>

                            {/eyou:volist}

                        </ul>

                    </div>

                </dd>

            </dl>

            <!-- 三級輸出標(biāo)簽,未選擇一級時隱藏 -->

            {eyou:volist name='$val.twoLevelArr' id='two'}

            {notempty name="$two.threeLevelArr"}

                <dl class="clearfix">

                    <dt class="text-main">區(qū)縣:</dt>

                        <dd>

                            <div class="filter-nav">

                                <ul>

                                    {eyou:volist name='$two.threeLevelArr' id='three'}

                                    <li><a {$three.onClick} class="radius-rounded {$three.currentstyle}">{$three.name}</a></li>

                                    {/eyou:volist}

                                </ul>

                            </div>

                        </dd>

                </dl>

            {/notempty}

            {/eyou:volist}

    {/notempty}

    {/eyou:volist}

{/eyou:volist}

{$field.hidden}

{/eyou:screening}


文檔最后更新時間:2023-10-23 17:50:40

文檔
目錄

深色
模式

切換
寬度