基礎Table · EpiiAdmin中文文檔

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