# table列表
雖然layui已經提供了很多方便的方法,但是還是不夠簡便,目前系統對layui table模塊進行了重新封裝,并兼容所有的layui table的方法。
使得開發起來更加得心應手,減輕工作量。
# `init`初始化配置
建議在此處統一配置table容器以及相關的鏈接地址。另外還可以自己進行擴展屬性。
> 初始化的參數有
| 參數 | 說明 | 類型 | 是否必填 | 備注 |
| --- | --- | --- | --- | --- |
| table\_elem | table容器或者dom | string/dom | 是 | |
| table\_render\_id | 容器唯一 id | string | 否 | |
| index\_url | 列表接口 | string | 是 | |
| add\_url | 添加接口 | string | 否 | 需用添加功能必填 |
| edit\_url | 編輯接口 | string | 否 | 需用編輯功能必填 |
| delete\_url | 刪除接口 | string | 否 | 需用刪除功能必填 |
| export\_url | 導出接口 | string | 否 | 需用導出功能必填 |
| modify\_url | 屬性修改接口 | string | 否 | 需用屬性修改功能必填(例如:狀態的切換) |
> 實例,下方`stock_url`就是擴展屬性
~~~
var init = {
table_elem: '#currentTable',
table_render_id: 'currentTableRenderId',
index_url: 'mall.goods/index',
add_url: 'mall.goods/add',
edit_url: 'mall.goods/edit',
delete_url: 'mall.goods/delete',
export_url: 'mall.goods/export',
modify_url: 'mall.goods/modify',
stock_url: 'mall.goods/stock',
};
~~~
# 表格實例化
表格實例化方法為`ea.table.render()`, 兼容layui table的所有功能,另外還擴展了一些新的功能。
# 擴展表格參數
這些是基于layui的table的進行擴展的基礎參數,如需查看其他的參數,請去layui官網查看。
| 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 |
| --- | --- | --- | --- | --- | --- |
| init | `init`初始化配置 | object | 是 | | 一般情況下,請傳入上方配置好的初始化參數 |
| search | 是否開啟搜索功能 | bool | 否 | true | 開啟會自動根據`列`生成搜索表單 |
| modifyReload | 修改屬性時是否刷新表格 | bool | 否 | true | |
| toolbar | table操作欄 | object | 否 | \['refresh','add','delete','export'\] | 除了這些內置的,還可以自己進行擴展 |
> 代碼示例
~~~
ea.table.render({
init: init,
toolbar: [...表格toolbar...],
cols: [...請參考下方列參數...],
});
~~~
# 表格toolbar操作欄
* 默認內置有四種toolbar操作方法,分別是:
* `refresh`
* `add`
* `delete`
* `export`
* 另外可以根據下方提供的參數進行自定義擴展
| 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 |
| --- | --- | --- | --- | --- | --- |
| class | 樣式信息 | string | 否 | | |
| icon | 圖標信息 | string | 否 | | 在行操作里面,不建議使用圖標 |
| title | 提示信息 | string | 否 | 為空則讀取`text`屬性 | |
| text | 文本信息 | string | 否 | 為空則讀取`title`屬性 | |
| method | 執行方式 | string | 否 | open | 可用值,請參考下方參數說明 |
| url | 請求鏈接 | string | 是 | | |
| auth | 權限規則 | string | 是 | | 權限規則,具體請參考配置`auth權限驗證`模塊 |
| checkbox | 是否多選 | bool | 否 | false | 如果為true, 不管是彈出層還是直接請求, 請求時會攜帶上勾選的id值 |
| extend | 擴展屬性 | string | 否 | | 例如彈出層全屏操作,可以加上:`data-full="true"` |
> 相關參數說明
* `method`執行方式:
* `open`彈出層打開
* `request`直接請求
> 示例
~~~
toolbar: ['refresh',
[{
text: '添加',
url: init.add_url,
method: 'open',
auth: 'add',
class: 'layui-btn layui-btn-normal layui-btn-sm',
icon: 'fa fa-plus ',
extend: 'data-full="true"',
}],
'delete', 'export'],
~~~
# 擴展列參數
列參數完美兼容layui的table所有列參數,具體請查看layui官網。
# 搜索表單生成器
提供快捷搜索表單生成器,根據table表格初始化時的列參數進行動態生成。
> 下方是相關的表格列參數
| 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 |
| --- | --- | --- | --- | --- | --- |
| search | 搜索類型 | string/bool | 否 | true | 可用值,請參考下方參數說明 |
| searchOp | 搜索條件 | string | 否 | %\*% | 可用值,請參考下方參數說明 |
| searchTip | 搜索提示語 | string | 否 | 默認獲取`title`參數值自動生成 | |
| searchValue | 表單初始化值 | string | 否 | | |
| selectList | 下拉列表值 | object | 否 | | 需要`search`參數等于`select`時才生效 |
| fieldAlias | 字段別名 | string | 否 | 與`field`參數相等 | 某些特殊情況下才需要,正常用不上 |
> 相關參數說明
* `search`搜索類型:
* `false`關閉搜索
* `true`開啟搜索
* `select`下拉選擇
* `range`時間范圍
* `time`時間格式
* `searchOp`搜索條件:
* `=`精確搜索
* `%*%`模糊搜索
* `*%`右匹配模糊搜索
* `%*`左匹配模糊搜索
* `range`范圍搜索
> 代碼示例
~~~
cols: [[
{type: "checkbox"},
{field: 'id', width: 80, title: 'ID'},
{field: 'sort', width: 80, title: '排序', edit: 'text'},
{field: 'title', minWidth: 80, title: '商品名稱'},
{field: 'logo', minWidth: 80, title: '分類圖片', search: false, templet: ea.table.image},
{field: 'status', title: '狀態', width: 85, selectList: {0: '禁用', 1: '啟用'}, templet: ea.table.switch},
{field: 'create_time', minWidth: 80, title: '創建時間', search: 'range'},
]],
~~~
# 列operat操作欄
* 默認內置有兩種operat操作方法,分別是:
* `edit`
* `delete`
* 另外可以根據下方提供的參數進行自定義擴展
| 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 |
| --- | --- | --- | --- | --- | --- |
| class | 樣式信息 | string | 否 | | |
| icon | 圖標信息 | string | 否 | | 在行操作里面,不建議使用圖標 |
| title | 提示信息 | string | 否 | 為空則讀取`text`屬性 | |
| text | 文本信息 | string | 否 | 為空則讀取`title`屬性 | |
| method | 執行方式 | string | 否 | open | 可用值,請參考下方參數說明 |
| url | 請求鏈接 | string | 是 | | |
| auth | 權限規則 | string | 是 | | 權限規則,具體請參考配置`auth權限驗證`模塊 |
| field | 綁定行字段 | string | 否 | id | 會自動根據此字段生成鏈接后綴 |
| extend | 擴展屬性 | string | 否 | | 例如彈出層全屏操作,可以加上:`data-full="true"` |
> 相關參數說明
* `method`執行方式:
* `open`彈出層打開
* `request`直接請求
> 示例
~~~
operat: [
[{
text: '編輯',
url: init.edit_url,
method: 'open',
auth: 'edit',
class: 'layui-btn layui-btn-xs layui-btn-success',
extend: 'data-full="true"',
}, {
text: '入庫',
url: init.stock_url,
method: 'open',
auth: 'stock',
class: 'layui-btn layui-btn-xs layui-btn-normal',
}],
'delete']
~~~
# 列內置templet方法
| 方法 | 說明 | 備注 |
| --- | --- | --- |
| ea.table.list | 根據行的`selectList`返回對應列表值 | 一般類型之類的會用到 |
| ea.table.image | 顯示圖片 | 行參數`imageHeight`是控制圖片的高度 |
| ea.table.url | 格式化顯示鏈接 | |
| ea.table.switch | 生成開關組件 | |
| ea.table.price | 格式化為價格 | |
| ea.table.percent | 格式化為百分比 | |
| ea.table.icon | 顯示圖標 | |
| ea.table.value | 格式化數據 | 多層對象數據的顯示 |
| ea.table.tool | 列操作欄 | 自動生成列操作欄 |
> 示例
~~~
cols: [[
{field: 'head_img', minWidth: 80, title: '頭像', templet: ea.table.image},
{field: 'status', title: '狀態', width: 85, search: 'select', selectList: {0: '禁用', 1: '啟用'}, templet: ea.table.switch},
{width: 250, title: '操作', templet: ea.table.tool}
]],
~~~
# 完整例子
~~~
define(["jquery", "easy-admin"], function ($, ea) {
var init = {
table_elem: '#currentTable',
table_render_id: 'currentTableRenderId',
index_url: 'mall.goods/index',
add_url: 'mall.goods/add',
edit_url: 'mall.goods/edit',
delete_url: 'mall.goods/delete',
export_url: 'mall.goods/export',
modify_url: 'mall.goods/modify',
stock_url: 'mall.goods/stock',
};
var Controller = {
index: function () {
ea.table.render({
init: init,
toolbar: ['refresh',
[{
text: '添加',
url: init.add_url,
method: 'open',
auth: 'add',
class: 'layui-btn layui-btn-normal layui-btn-sm',
icon: 'fa fa-plus ',
extend: 'data-full="true"',
}],
'delete', 'export'],
cols: [[
{type: "checkbox"},
{field: 'id', width: 80, title: 'ID'},
{field: 'sort', width: 80, title: '排序', edit: 'text'},
{field: 'cate.title', minWidth: 80, title: '商品分類'},
{field: 'title', minWidth: 80, title: '商品名稱'},
{field: 'logo', minWidth: 80, title: '分類圖片', search: false, templet: ea.table.image},
{field: 'market_price', width: 100, title: '市場價', templet: ea.table.price},
{field: 'discount_price', width: 100, title: '折扣價', templet: ea.table.price},
{field: 'total_stock', width: 100, title: '庫存統計'},
{field: 'stock', width: 100, title: '剩余庫存'},
{field: 'virtual_sales', width: 100, title: '虛擬銷量'},
{field: 'sales', width: 80, title: '銷量'},
{field: 'status', title: '狀態', width: 85, selectList: {0: '禁用', 1: '啟用'}, templet: ea.table.switch},
{field: 'create_time', minWidth: 80, title: '創建時間', search: 'range'},
{
width: 250,
title: '操作',
templet: ea.table.tool,
operat: [
[{
text: '編輯',
url: init.edit_url,
method: 'open',
auth: 'edit',
class: 'layui-btn layui-btn-xs layui-btn-success',
extend: 'data-full="true"',
}, {
text: '入庫',
url: init.stock_url,
method: 'open',
auth: 'stock',
class: 'layui-btn layui-btn-xs layui-btn-normal',
}],
'delete']
}
]],
});
ea.listen();
},
add: function () {
ea.listen();
},
edit: function () {
ea.listen();
},
stock: function () {
ea.listen();
},
};
return Controller;
});
~~~