filter 篩選標簽 · HkCms tp6版使用手冊《免授權，永久商用》-02251406

# filter 篩選標簽 - [filter 篩選標簽](#filter__2) - [參數](#_5) - [使用注意](#_14) - [參數說明](#_26) - [字段調用](#_136) ## filter 篩選標簽獲取后臺模型設定的篩選字段。常用于列表篩選 ## 參數參數名稱可選值默認值是否必填說明id-$item-指定循環里的變量名，例如id='obj'，模板調用如：{$item.title} 變成 {$obj.title}currentstyle-active-指定選中的class樣式multiple1/00-是否允許多選，1-開啟多選，0-關閉field開啟篩選的字段--限制顯示篩選字段alltxt-全部-第一個選項顯示的文字，例如：alltxt="不限"，等于off則不顯示## 使用注意要使用篩選標簽，請先在后臺指定篩選的字段 ![](https://img.kancloud.cn/ec/e9/ece9d26b8287e8ed475e48687766ca16_1328x897.png) 如果你的字段類型非下拉列表、單選、復選，你需要指定選項類別。如下圖 ![](https://img.kancloud.cn/4a/39/4a3910bd78ed6728a637f8671702b597_785x601.png) 效果圖： ![](https://img.kancloud.cn/53/9a/539acbf7d2546e3bb12d79f0297bb8aa_505x126.png) ## 參數說明 `id`參數，用于指定循環的變量名，默認是`$item`，設置值`id="obj"`，變量名即為$obj。 ``` <pre class="calibre16">``` {hkcms:filter id="obj"} 選項名字：{$obj.title}: // 選項列表，使用volist循環標簽循環輸出。 {hkcms:volist name="obj.option" id="vo"} <a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a> {/hkcms:volist} {/hkcms:filter} ``` ``` `currentstyle` 指定選擇項的class，默認class名稱為`active` ``` <pre class="calibre16">``` {hkcms:filter id="obj" currentstyle="newclass"} 選項名字：{$obj.title} {hkcms:volist name="obj.option" id="vo"} // currentstyle="newclass", 當該選項選中時，$vo.currentstyle的值為newclass，沒選擇的為空。 <a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a> {/hkcms:volist} {/hkcms:filter} ``` ``` `multiple`參數開啟多選，1=開啟，0=關閉 ``` <pre class="calibre16">``` {hkcms:filter multiple="1" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ``` ``` `field` 限定字段，當有時候不想顯示所有篩選字段，在這里可以指定篩選的字段。多個字段使用英文逗號分隔。如下： ``` <pre class="calibre16">``` // 只顯示option和option2的字段 {hkcms:filter field="option,option2" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ``` ``` `alltxt`指定第一個重置選項的名稱，例如通常有：全部、不限等，默認顯示`全部`，如果不想顯示等于`off`即可關閉 ``` <pre class="calibre16">``` {hkcms:filter alltxt="不限" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ``` ``` 效果 ![](https://img.kancloud.cn/86/ba/86bab175108536f4a69959cf3960dc2e_314x101.png) 篩選文字多語言化，注意前提寫好多語言。多語言配置可前往多語言章節了解。 ``` <pre class="calibre16">``` {hkcms:filter alltxt="lang('All')" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> // 多語言標題，格式為：{:__(這里寫變量)} <div class="">{:__($item.title)}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{:__($vo.title)}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ``` ``` 關閉第一的重置選項 ``` <pre class="calibre16">``` {hkcms:filter alltxt="off" } <div class="pt-2 pb-2 d-flex mb-1 mt-1"> <div class="">{$item.title}: </div> <div class="filter"> <ul class="clearfix mb-0"> {hkcms:volist name="item.option" id="vo"} <li><a href="{$vo.url}" class="{$vo.currentstyle}">{$vo.title}</a></li> {/hkcms:volist} </ul> </div> </div> {/hkcms:filter} ``` ``` 效果 ![](https://img.kancloud.cn/7d/81/7d81c716138751bb63cb4c10cb43f68e_336x113.png) ## 字段調用更多字段可在模型管理》字段管理里面找到字段的名字，以下僅包含主要的字段 **注意：其中`$item`變量根據filter標簽的id參數影響，默認是：$item。** 字段名說明調用方式title字段標題{$item.title}name字段名{$[item.name](http://item.name)}option數組，里面是篩選的選項,使用volist循環標簽{hkcms:volist name="item.option" id="vo"} {/hkcms:volist}**option 內容，id="vo"** 字段名說明調用方式title標題{$vo.title}name選項值{$[vo.name](http://vo.name)}url鏈接地址{$vo.url}currentstyle高亮，選中的選項有class，用于css定義顏色高亮{$vo.currentstyle}