# 列表的控制
快速實現 對列表的刷新,批量刪除,批量編輯等操作
任何一個控件,如果相對某一個列表進行控制,只需在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配置