# 列表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配置