table數據表格 · Easyadmin_二開筆記

# 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; }); ~~~