# 列表Table
基于 [`bootstrap-table`](http://bootstrap-table.wenzhixin.net.cn/zh-cn/),让列表生成,搜索如此简单。
任何一个`table`，只需在 `table标签`中加上 `data-table="1"` 即可实现`table`智能化。
#### 特性
>[danger] - 支持所有`bootstrap-table`语法，如果想深入了解可查看[教程](http://bootstrap-table.wenzhixin.net.cn/zh-cn/)。
> - 控制与列表分离，`控制按钮`放在什么地方都可以。（很实用）
> - 搜索与列表分离，`搜索表单`放在什么地方都可以。（很实用）
> - 一系列常用的字段格式化方式，让现实更丰富。
> - 样式通过列表数据（后台）即可控制。
## 1、普通列表
先看一个简单的案例：
html文件
```html
<table data-table="1" data-url="{:url('demo/index/ajaxdata')}" id="table1" class="table table-hover">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-formatter="fun1">自定义列</th>
<th data-field="id" data-formatter="epiiFormatter">网址</th>
<th data-field="name" data-formatter="epiiFormatter">Item Name</th>
<th data-field="price" data-formatter="epiiFormatter">Item Price</th>
<th data-formatter="epiiFormatter.btns" data-btns="edit,detail,del,me"
data-edit-url="http://www.baidu.com" data-edit-title="{name}"
data-del-msg="确定要删除{name}？" data-del-url="{:url('demo/index/del')}">操作</th>
</tr>
</thead>
</table>
```
php 代码
```php
public function ajaxdata()
{
return json(["rows" => [
["id" => 1, "name" => "张三", "price" => "nicasq"],
["id" => 2, "name" => "张三", "price" => "nicasq"],
["id" => 3, "name" => "张三",
"price" => "nicasq", "price_class" => "badge badge-info", "price_style" => ["background-color" => "red"]
],
["id" => 9, "name" => "张三", "price" => "nicasq"],
["id" => 4, "name" => "张三",
'name_style'=>["color"=>"red","background-color"=>"blue"], "price" => "nicasq"
],
["id" => 5, "name" => "张三", "price" => "nicasq",'name_color'=>"red"],
["id" => 7, "name" => "张三", "price" => "nicasq"],
], "total" => 100]);
}
```
效果如下：
![table1]
`table`的设置包含两部分设置
- table本身的设置，如数据源设置，样式等。在`table标签`上中设置
- 每一列的设置，如字段的数据源,背景,字体大小等。在`table > thead >tr > th` 上设置。
任何一个table，只需在 table标签中加上 `data-table="1"` 即可实现table智能化。
#### 常用的`table`属性有
名称 | 意义 | 默认值
---|---|---
`data-table`| 标记为智能table，只能`data-table=1` |
`data-url`| 数据源地址 |
`data-method` | 请求方式 | `POST`
`data-page-size` | 每页数据量 | 30
`data-data-type` | 数据格式 | `json`
`data-id-field`| 数据的id列名称，默认为`id`
更多 `table` 属性请查看 [`Bootstrap Table 中文文档`](https://blog.csdn.net/rickiyeat/article/details/56483577)
#### 常用的列属性有
名称 | 意义 | 默认值
---|---|---
`data-field`| 对应的数据源 |
`data-formatter`| 数据格式 | 无/数据原样输出
更多列属性请查看 [`Bootstrap Table 中文文档`](https://blog.csdn.net/rickiyeat/article/details/56483577)
默认所有数据将原样显示在列中，当我们需要对数据展示进行特殊显示时候，只需设置 `data-formatter='fun'` 即可
我们在上面例子中加上
```html
<th data-field="name" data-formatter="fun1">自定义列</th>
```
并实现`fun1`
>[info] 格式化单元格内容，function(field_value, row, index,field_name), field_value：该cell本来的值(data-field设置的)，row：该行数据，index：该行序号（从0开始）,field_name 改cell设置的field值
```javascript
function fun1(field_value, row, index,field_name) {
return "<font color='red'>"+row.price+"#"+field_name+"#"+field_value+"</font>";
}
```
效果如下：
![table2]
### `EpiiAdmin`自带了一个格式化函数`epiiFormatter`，这个格式化函数可以实现更加复杂的显示，并且无需在编写`js`函数。
```html
data-formatter="epiiFormatter"
```
假如我们设置了`data-field='{field}'`
那么在后台数据中只需加上：
>[danger] '{field}_style'=>["color"=>"red","background-color"=>"blue"] //设置style样式
> "{field}_class" => "badge badge-info" //设置 字段`class`（追加）
> "{field}_attr" => ["data-test"=>"1","attr1"=>"attr"] //设置 字段属性
如 `data-field='name'` 只需在数据中设置
```php
'name_style'=>array(),
'name_class'=>"class1"
'name_attr'=>array(),
```
如下效果，使用此方法实现。
![table3]
刚才的方法实际上后台通过数据来影响显示。那么前台是否可以设置样式呢，当然可以。
首先
```html
data-formatter="epiiFormatter"
```
然后通过设置
>[danger] data-tag-style="color:red;background-color:blue"
> data-tag-class= "badge badge-info" //设置 字段`class`（追加）
> data-tag-attr = "data-test='1' attr1='attr'" //设置字段属性
通过前台的设置是针对这一列`全部`生效的。
例如我们增加一列
```html
<th data-field="name"
data-formatter="epiiFormatter"
data-tag-style="background-color:#666">自定义列2</th>
```
如下效果
![table4]
那么上图中操作列中的三个按钮是如何实现的呢？
最基础的方法，我们可以通过自定义格式化方法实现，比如
```html
<th data-field="name" data-formatter="fun2">自定义列</th>
```
并实现`fun2`,大致如下
```javascript
function fun2(field_value, row, index,field_name) {
var btns = "<button >编辑</button>"+
"<button >详情</button>"+
"<button >删除</button>";
return btns;
}
```
### `EpiiAdmin`自带了一个格式化函数`epiiFormatter.btns`，这个格式化函数可以实现多个按钮。
通过 `data-btns='btn1,btn2n3'` 来设置按钮,其中 `btn1,btn2` 为三个`js自定义函数`
```html
<th data-field="name" data-formatter="epiiFormatter.btns" data-btns='btn1,btn2'>自定义列2</th>
```
```javascript
function btn1(field_value, row, index,field_name) {
return "<a class='btn btn-info btn-dialog' href='http://www.baidu.com'>详情</a>";
}
function btn2(field_value, row, index,field_name) {
return "<a class='btn btn-warning'>编辑</a>";
}
```
效果为
![table5]
是不是每一个按钮都需要自己写函数呢？当然不是。
`EpiiAdmin`为常用的`详情` `编辑` `删除` 按钮设置了号自定函数。无需自己编写js。但需要设置对应的属性，详情如下
按钮|意义
---|---
`detail`|详情按钮，默认以dialog的方式打开
`detail_addtab`|详情按钮，以addtab的方式打开
`edit`|编辑按钮，默认以dialog的方式打开
`edit_addtab`|编辑按钮，以addtab的方式打开
`del`|删除按钮，默认弹出警告框，然后以ajax方式请求删除
分别对应的属性为：
1、`detail,detail_addtab` 需要实现的属性有（属性值支持变量解析，变量为{}符号表示）
属性|意义
---|---
`data-detail-url`| 详情页面地址 如 `http://domain.com/info?id={id}`
`data-detail-title`|详情`dialog 或 addtab` 的标题： 如 "用户{name}的详情"
2、`edit,edit_addtab` 需要实现的属性有（属性值支持变量解析，变量为{}符号表示）
属性|意义
---|---
`data-edit-url`| 编辑页面地址 如 `http://domain.com/edit?id={id}`
`data-edit-title`|编辑`dialog 或 addtab`的标题： 如 "编辑用户{name}"
3、`del` 需要实现的属性有（属性值支持变量解析，变量为{}符号表示）
属性|意义
---|---
`data-del-url`| 删除接口api地址 如 `http://domain.com/api/del?id={id}`
`data-del-msg`| 警告框内容 如 "确定要删除用户{name}吗？"
`data-del-title`| 警告框标题 如 "重要提示！"
文章刚开头的案例按钮改为
```html
<th data-formatter="epiiFormatter.btns"
data-btns="edit,detail,del,mybtn"
data-edit-url="http://www.baidu.com"
data-edit-title="编辑{name}"
data-detail-url="http://www.baidu.com"
data-detail-title="{name}的详情"
data-del-msg="确定要删除{name}？"
data-del-url="{:url('demo/index/del')}">操作</th>
```
我们设置`data-btns="edit,detail,del,mybtn"` 其中 `edit,detail,del` 这三个系统预设，我们不需要编写js函数，但`mybtn`需要我们自己编写
```javascript
function mybtn(field_value, row, index,field_name) {
return "<a class='btn btn-info btn-dialog' href='http://www.baidu.com'>测试</a>"
}
```
效果视频
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table6.mov"></video>
</p>
### `EpiiAdmin`格式化函数`epiiFormatter.url` 可以实现列的连接实现。
如
```html
<th data-formatter="epiiFormatter.url"
data-url="http://www.baidu.com/?s={name}"
data-value="{name}的详情">详情</th>
```
>[danger] 注意：`data-value="{name}的详情"`和`data-field='name'` 均可设置连接的字，`data-value` 更灵活
`epiiFormatter.url` 默认是在当前页面中打开，需要其他方式请参照一下设置。
属性|意义
---|---
`epiiFormatter.url.addtab`| 在头部tab导航中打开，标题用`data-page-title`设置
`epiiFormatter.url.dialog`| 在dialog中打开，标题用`data-page-title`设置
`epiiFormatter.url._blank`| 在浏览器新页面打开
如
```html
<th data-formatter="epiiFormatter.url.dialog"
data-url="http://www.baidu.com/?s={name}"
data-page-title="{name}的详情"
data-tag-attr="data-area='70%,80%'"
data-value="详情">详情</th>
```
效果视频
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table7.mov"></video>
</p>
[table1]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table1.png
[table2]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table2.png
[table3]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table3.png
[table4]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table4.png
[table5]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table5.png
[table6]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table6.png
- 简介/安装
- 快速搭建一个用户中心
- Js代码写在哪里
- 环境变量Args
- 前台组件
- Dialog方式打开页面
- Addtab方式打开页面
- Alert提醒框
- Confirm确认框
- Prompt输入框
- 表单Form
- 列表Table/list
- 基础Table
- 控制Table
- 搜索Table
- 城市选择city-picker
- 文件上传组件
- 基础版本
- 简单版本
- 更多实用组件
- 后台
- 实现方式综述
- 命令管理类JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的简化
- 文件上传
- 后台基础
- 后台进阶
- 左侧导航badge配置