# 列表的控制
快速实现 对列表的刷新,批量删除,批量编辑等操作
任何一个控件,如果相对某一个列表进行控制,只需在class加上`btn-table-tool` 即可。如
```html
<a class="btn btn-danger btn-table-tool"
data-do="do1"
data-table-id="table1">操作1</a>
```
在 class加上btn-table-tool后支持的属性有
属性|意义
---|---
`data-table-id`|要控制的tableid,若为空,则为页面的第一个table标签。
`data-do`| 要进行什么操作。`data-do='fun'` 只为函数名
>[info] data-do的函数为,function(ids,select_data), ids:为选择的id数组,select_data 为选择行对应的后台返回的数据
```javascript
function do1(ids,select_data) {
console.log("select ids is:");
console.log(ids);
console.log("select_data is:");
console.log(select_data)
}
```
选择后
![table12]
点击`操作1`按钮,控制台输出
![table11]
操作视频
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table10.mov"></video>
</p>
## `EpiiAdmin` 预设了两个常用的操作函数为:
属性|意义
---|---
`refresh`| 对列表刷新
`url`| 通过传递{ids}对选择的行进行处理,如批量详情,批量删除,批量编辑等操作
1、刷新`refresh`
```html
<a class="btn btn-info btn-outline-info btn-table-tool"
data-do="refresh">
<i class="fa fa-refresh"></i>刷新</a>
```
>[warning] 没有设置data-table-id,默认为页面第一个table
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table13.mov"></video>
</p>
2、访问`url`
当`data-do='url'` 时候,有效的属性为:
1、`data-url='http://domain.com/test.php?selectid={ids}'` 其中`{ids}`为选择的ids。数据的`id字段`默认的key为`id` 可通过table的`data-id-field`属性修改。
>[danger] 如果按钮为A标签,也可以用 href 属性
2、其它设置
设置|意义
---|---
`data-addtab=1`|在头部tab导航栏打开页面,更多参数请参考 [`addtab章节`](addtab.md)
`data-dialog=1`|以dialog的方式打开页面,更多参数请参考 [`dialog章节`](dialog.md)
`data-ajax=1`| 已ajax方式请求连接,更多参数请参考 [`ajax章节`](ajax.md)
例1,
```html
<a class="btn btn-info btn-outline-info btn-table-tool"
data-do="url"
data-dialog="1"
data-area="80%,90%"
data-title="详情"
href="{:url("demo/index/details")}?ids={ids}">详情</a>
```
操作视频
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table14.mov"></video>
</p>
例2,
```html
<a class="btn btn-danger btn-outline-info btn-table-tool"
data-do="url"
data-alert="1"
data-ajax="1"
data-title="提示"
data-msg="确定要删除吗?"
data-intop="1"
href="{:url("demo/index/ajax_del")}?ids={ids}">删除</a>
```
操作视频
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table16.mov"></video>
</p>
>[danger] 支持所有之前 *alert,confirm,addtab,dialog章节* 的参数
[table11]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table11.png
[table12]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/table12.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配置