tag 列表排序

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

## 概述：
当tag标签的action参数值为`search.option`时，返回一个列表排序数据集合`$search['order']`，可在产品模块，图片模块，下载模块，文章模块，招聘模块的列表页展示列表排序方式。

【注意】列表排序方式有：推荐（参考[列表页展示方式设置](https://doc.metinfo.cn/metinfo/column/column81.html "列表页展示方式设置")）、热门（[访问量](https://doc.metinfo.cn/metinfo/content/content123.html "访问量")）、新（[更新时间](https://doc.metinfo.cn/metinfo/content/content130.html "更新时间")）、销量（仅产品模块支持，且需开启[商城模块](https://doc.metinfo.cn/metshop/market/market155.html "商城模块")功能 ）。
## 使用范围：
仅在模板文件`product.php`、`img.php`、`download.php`、`news.php`、`job.php`中调用。
## 类型：
数据标签，用于调用列表排序数据的标签。

## 语法：

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

## 标签原理：
tag标签是数据的集合，数据类型类似js的数组，通过action参数传入不同值来获取不同的数据，当`action`传参为`search.option`时，便可获得搜索数据集合`$search`，通过list标签可将列表排序数据$search['order']循环渲染出来，具体参考[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['order']`，并在list标签内部编写html代码，使用$v变量来获取每个列表排序方式，这样我们就可以得到一段动态的包含列表排序方式的html代码了。

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

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

## $v数组：
tag标签是一个数据的集合，当`action="search.option"`调用搜索配置数据$search后，list标签内部循环排序列表数据`$search['order']`需指定$v数组为循环变量的别名，从而调用更多的排序数据。
### 调用语法：{$v.字段名称}

例如：

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

| 字段名称  | 含义  |
| ------------ | ------------ |
| name  | 排序名  |
| url  |  排序链接 |
|  sub | 用于判断数组长度  |
| _index  |  当前内容的下标，即排序名称的key值，可用于判断当前页面是否选中了该排序 |
| _first  |  用于判断是否为第一个 |
|  _last | 用于判断是否为后一个  |

## 示例：
### 如何调用列表排序功能进行内容排序：
**场景案例：**产品列表页，通过“推荐”、“热门”、“新”、“销量”对当前栏目内容列表进行排序。

**模板代码：**

<tag action='search.option'></tag>// 获取搜索配置数据$search
    <ul>
    <list data="$search['order']" name="$v">// 循环调取排序列表$search['order']，具体参考list标签文档https://doc.metinfo.cn/mb/mbtag/84.html
    <li class="<if value="$v['_index'] eq $_M['form'][‘order’]”>active</if>”>//判断该排序的$v['_index']等于页面内容列表的排序值时，class等于active，if标签文档参考https://doc.metinfo.cn/mb/mbtag/85.html
    <a href="{$v.url}" title="链接关键词">{$v.name}<i class="icon wb-triangle-up" aria-hidden="true"></i></a>// {$v.url}排序链接；{$v.name}：排序名
    </li>
    </list>
    </ul>
    ...产品模块内容列表代码
    // 此处请参考产品模块内容列表标签文档https://doc.metinfo.cn/mb/mbtag/68.html

【注意】
- 排序列表可与内容列表结合一起显示，内容列表请参考产品、图片、下载模块，文章模块，招聘模块的内容列表标签文档。
- 实际编写时请去掉注释文字。

**前台页面输出HTML：**
假设排序列表选中了【新】选项，则代码如下：

<ul>
    	<li class="">
    		<a href="../product/index.php?class1=4&page=&pageset=1&search=search&order=com" title="链接关键词">
    			推荐 <i class="icon wb-triangle-up" aria-hidden="true"></i>
    		</a>
    	</li>
    	<li class="">
    		<a href="../product/index.php?class1=4&page=&pageset=1&search=search&order=hit" title="链接关键词">
    			热门 <i class="icon wb-triangle-up" aria-hidden="true"></i>
    		</a>
    	</li>
    	<li class="active">
    		<a href="../product/index.php?class1=4&page=&pageset=1&search=search&order=new" title="链接关键词">
    			新
    			<i class="icon wb-triangle-up" aria-hidden="true"></i>
    		</a>
    	</li>
    	<li class="">
    		<a href="../product/index.php?class1=4&page=&pageset=1&search=search&order=sales" title="链接关键词">
    			销量
    			<i class="icon wb-triangle-up" aria-hidden="true"></i>
    		</a>
    	</li>
    </ul>
    ...产品模块内容列表代码
    // 此处请参考产品模块内容列表标签文档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"}