tag 参数筛选

更新时间：2020-05-26 15:03:52 作者：米拓建站

## 概述：
当tag标签的action参数值为`search.option`时，返回一个筛选参数数据集合`$search['para']`，可在产品模块，图片模块，下载模块的列表页展示筛选参数列表。

【注意】可参考【[产品、图片、下载模块参数设置 ](https://doc.metinfo.cn/metinfo/content/content_169_1.html "产品、图片、下载模块参数设置 ")】添加筛选参数（单选、多选、下拉类型参数）。

## 使用范围：
仅在模板文件`product.php`、`img.php`、`download.php`中调用。
## 类型：
数据标签，用于调用筛选参数数据的标签。
## 语法：
    <tag action='search.option'></tag>
    <list data="$search['para']" name="$v">
        {$v.name}：//参数名称
    </list>

【说明】
- tag标签中对应的参数及选项值可参考下面的“参数说明”；
- tag标签中的$search为数据集合，其中$search['para']为筛选参数数据集合，可通过list标签循环调用$search['para']，并在list标签中通过$v数组及对应的字段获取调用筛选参数信息，具体可参考下方的“$v数组”。

## 标签原理：
tag标签是数据的集合，数据类型类似js的数组，通过action参数传入不同值来获取不同的数据，当`action`传参为`search.option`时，便可获得数据集合`$search`，通过list标签可将筛选参数数据集合`$search['para']`循环渲染出来，具体参考[list标签文档](https://doc.metinfo.cn/mb/mbtag/84.html "list标签文档")。

list标签的语法和js中的for函数类似，在list标签的内部书写待渲染的html标签，$v为每个循环变量的别名，包含了每条内容的数据。
**tag、list标签：**

**for函数：**

for(i=0;i<list.length;i++){
    document.write(list[i]['name']+’：’);
    }

总结：tag标签是后台返回数据的集合，类似于数组，在传入指定参数后会返回数据集合`$search`，通过list标签调用筛选参数数据集合`$search['para']`，并在list标签内部编写html代码，使用$v变量来获取每个参数的数据，这样我们就可以得到一段动态的包含参数数据的html代码了。

## 参数说明：
tag标签，可通过传入不同的参数值，来调用对应的内容，以下为参数筛选列表数据（`$search['para']`）标签对应的参数选项值：

|  参数名 |  是否必填 | 默认值 |  参数值说明 |
| ------------ | ------------ | ------------ | ------------ |
| action  |  是 | null  |  指定调用的方法(search.option) |

## $v数组：

tag标签是一个数据的集合，当`action="search.option"`获得一个包含参数数据的集合`$search`，通过list标签可将筛选参数数据集合`$search['para']`循环渲染出来，并指定$v数组为循环变量的别名，从而调用更多的参数数据。

### 调用语法：`{$v.字段名称}`
例如：

### $v数组中包含的字段：

| 字段名称  |  含义 |
| ------------ | ------------ |
| id  | 参数ID  |
| name  | 参数名  |
| list  | 参数值列表  |
| sub  | 用于判断数组长度  |
| _index  | 当前内容的下标，从0开始  |
| _first  |  用于判断是否为第一个 |
| _last  |  用于判断是否为后一个 |

## 示例：
### 产品列表页如何调用参数筛选列表：
**场景案例：**产品列表页，通过添加的[产品筛选参数](https://doc.metinfo.cn/metinfo/content/content147.html "产品筛选参数")：颜色（红色、黑色）、型号（Met001、Met002）进行内容筛选。

**模板代码：**

<tag action='search.option'></tag>// 获取搜索配置数据$search
    <div>
    <list data="$search['para']" name="$v">// 循环调取参数筛选列表$search['para']，具体参考list标签文档https://doc.metinfo.cn/mb/mbtag/84.html
    <div>
        {$v.name}：//参数名称
        <ul>
            <list data="$v['list']" name="$attr" >// 循环调取参数值列表$search['para']，具体参考list标签文档https://doc.metinfo.cn/mb/mbtag/84.html
                <li class="{$attr.check}"><a href="{$attr.url}" title="链接关键词">{$attr.name}</a></li>//{$attr.check}：参数值选中时的class,选中时为para_select_option，否则为空；{$attr.url}：参数值链接；{$attr.name}：参数值名称
            </list>
    </ul>
    </div>
    </list>
    </div>
    ...产品模块内容列表代码
    // 此处请参考产品模块内容列表标签文档https://doc.metinfo.cn/mb/mbtag/68.html
    
【注意】
- 参数筛选列表标签可搭配内容列表标签使用，内容列表标签请参考产品、图片、下载模块的内容列表标签文档。
- 实际编写时请去掉注释文字。

**前台页面输出HTML：**
筛选参数选择红色、全部型号时，前台页面输出html代码如下：

<div>
    	<div>
    		颜色：
    		<ul>
    			<li class="">
    				<a href="../product/index.php?class1=4&page=&pageset=1&search=search¶=d443lMrMOc5tsb62hdp5sNz8G9g5TsyfKCh9aKA0jflvGB3%2BGKcG" title="链接关键词">全部</a>
    			</li>
    			<li class="">
    				<a href="../product/index.php?class1=4&page=&pageset=1&search=search¶=2bb7Xz5XiJLnxAXr0YSky3zUyX7%2BBIB7APPovwwPfNyNS7%2FU9wWGUlU" title="链接关键词">黑色</a>
    			</li>
    			<li class="para_select_option">
    				<a href="../product/index.php?class1=4&page=&pageset=1&search=search¶=2bb7Xz5XiJLnxAXr0dD8mX2Cy3yuXtF8Va664g0PfNyNS7%2FU9wWEUlU" title="链接关键词">红色</a>
    			</li>
    		</ul>
    	</div>
    	<div>
    		型号：
    		<ul>
    			<li class="para_select_option">
    				<a href="../product/index.php?class1=4&page=&pageset=1&search=search¶=2bb7Xz5XiJLnxAXr0df0my2Azy%2F9Bdp%2BA%2FO%2F7lAPfNyNRL%2FU9xXM" title="链接关键词">全部</a>
    			</li>
    			<li class="">
    				<a href="../product/index.php?class1=4&page=&pageset=1&search=search¶=2bb7Xz5XiJLnxAXr0df9kS2GzymuXdcrV%2F%2Ft7A4PfNyNRL%2FU9wSBUlU" title="链接关键词">Met001</a>
    			</li>
    			<li class="">
    				<a href="../product/index.php?class1=4&page=&pageset=1&search=search¶=2bb7Xz5XiJLnxAXr0Yn8mCmByXz8CYArB%2F%2B%2B7AoPfNyNRL%2FU9wWIUlU" title="链接关键词">Met002</a>
    			</li>
    		</ul>
    	</div>
    </div>
    ...产品模块内容列表代码
    // 此处请参考产品模块内容列表标签文档https://doc.metinfo.cn/mb/mbtag/68.html

文档中心

米拓学堂

帮助中心

在线交流

{"status":1,"html":"<style type=\"text\/css\">\r\n.onlinebox_three{border:2px solid;}\r\n.onlinebox_three .onlinebox_three_list{width: 160px;padding: 10px 0px;}\r\n.onlinebox_three .online-item{margin-bottom: 5px; padding: 0px 17px; position: relative;display: block;color: #666;}\r\n.onlinebox_three .online-item:last-child{margin-bottom: 0px;}\r\n.onlinebox_three .online-item:hover{background: #f8f8f8;}\r\n.onlinebox_three .online-item i{font-size: 16px;}\r\n.onlinebox_three .onlinebox-open{font-size: 22px;display:none;cursor: pointer;padding: 0 10px; font-size: 18px; line-height: 40px;}\r\n.onlinebox.min .onlinebox-open{display:block;padding:0 10px;background:#444;font-size:18px;line-height:40px;color:#fff}\r\n.onlinebox .onlinebox-min{position: relative;top:-4px;}\r\n@media (max-width: 767px){\r\n.onlinebox_three .online-item{font-size: 12px;padding-top: 6px;}\r\n.onlinebox_three .online-item i{font-size: 14px;}\r\n}\r\n<\/style>\r\n<div id='onlinebox'  class=\"onlinebox onlinebox_three hide\" m-type='online' m-id='online' style=\"border-color:#1baadb;\">\r\n    <div class=\"onlinebox-open\" style=\"background:#1baadb;\"><i class=\"fa fa-comments-o\"><\/i><\/div>\r\n    <div class=\"onlinebox-box\">\r\n        <div class=\"onlinebox-top\" style=\"background:#1baadb;\">\r\n            <div class=\"onlinebox-top-btn font-size-26\">\r\n                <a href=\"javascript:;\" class=\"onlinebox-close\" title=\"\">×<\/a>\r\n                <a href=\"javascript:;\" class=\"onlinebox-min\">-<\/a>\r\n            <\/div>\r\n            <h4>在线交流<\/h4>\r\n        <\/div>\r\n                                    <div class=\"met-editor onlinebox-bottom p-x-10 p-y-5\"><p style=\"text-align: center;\">\r\n    <img src=\"..\/upload\/202001\/1579417409303256.png\" data-width=\"120\" width=\"120\" data-height=\"120\" height=\"120\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    微信公众号\r\n<\/p>\r\n<p style=\"text-align:center;\">\r\n    <img src=\"..\/upload\/202001\/1579417452544806.png\" data-width=\"150\" width=\"150\" data-height=\"150\" height=\"150\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    QQ交流群\r\n<\/p><\/div>\r\n    <\/div>\r\n<\/div>","t":"4","x":"10","y":"130"}