table數據表格 · yzncms2.0使用手冊

## table列表雖然layui已經提供了很多方便的方法，但是還是不夠簡便，目前系統對layui table模塊進行了重新封裝，并兼容layui table模塊所支持的全部基礎參數項。 **layui手冊的表格用法不在重復寫在這里面，請結合layui手冊的表格章節，以下用法為拓展的方法** ***** ## ` 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 | 否 | 需用刪除功能必填 | | multi_url | 屬性修改接口 | string | 否 | 需用屬性修改功能必填（例如：狀態的切換） | > 代碼示例 ``` Table.init = { table_elem: '#currentTable', table_render_id: 'currentTable', add_url: "user.user/add", edit_url: "user.user/edit", delete_url: "user.user/del", }; ``` ***** ## 表格實例化表格實例化方法為`Table.render`, 兼容layui table的所有功能，另外還擴展了一些新的功能。 ***** ## 擴展表格參數這些是基于layui的table的進行擴展的基礎參數，如需查看其他的參數，請去layui官網查看。 | 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 | | --- | --- | --- | --- | --- | --- | | init | `init`初始化配置 | object | 是 | | 一般情況下，請傳入上方配置好的初始化參數 | | search | 是否開啟搜索功能 | bool | 否 | true | 開啟會自動根據`列`生成搜索表單 | |searchFormVisible|是否始終顯示搜索表單|bool|否|false|| |showSearch|工具欄是否顯示搜索按鈕|bool|否|true|| |searchInput|是否啟用搜索框|bool|否|true|| |searchFormTpl|自定義搜索元素|string|否||1.4.2+新增| | modifyReload | 修改屬性時是否刷新表格 | bool | 否 | true | | | toolbar | table操作欄 | object | 否 | ['refresh','add,'delete'] | 除了這些內置的，還可以自己進行擴展 | > 代碼示例 ``` Table.render({ init: Table.init, toolbar: [...表格toolbar...], cols: [...請參考下方列參數...], }); ``` ***** ## 擴展列參數列參數完美兼容layui的table所有列參數，具體請查看layui官網。 ***** ## 表格toolbar操作欄 * 默認內置有7種toolbar操作方法，分別是： * `refresh`//刷新 * `add`//添加 * `edit`//編輯 * `delete`//刪除 * `recyclebin`//回收站 * `restore`//還原 * `destroy`//銷毀 * 另外可以根據下方提供的參數進行自定義擴展 | 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 | | --- | --- | --- | --- | --- | --- | | class | 樣式信息 | string | 否 | | | | icon | 圖標信息 | string | 否 | | 在行操作里面，不建議使用圖標 | | title | 提示信息 | string | 否 | 為空則讀取`text`屬性 | | | text | 文本信息 | string | 否 | 為空則讀取`title`屬性 | | | url | 請求鏈接 | string | 是 | | | | extend | 擴展屬性 | string | 否 | | | ``` toolbar: ['refresh', [{ text: '添加', url: Table.init.add_url, class: 'layui-btn layui-btn-normal layui-btn-sm', icon: 'iconfont icon-add-fill', extend: 'lay-event="btn-add"' }], 'delete'] ``` ***** ## 列operat操作欄 * 默認內置有兩種operat操作方法，分別是： * `edit`//編輯 * `delete`//刪除 * 另外可以根據下方提供的參數進行自定義擴展 | 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 | | --- | --- | --- | --- | --- | --- | | class | 樣式信息 | string | 否 | | | | icon | 圖標信息 | string | 否 | | | | text | 文本信息 | string\|function | 否 | | | | title | 提示信息 | string\|function | 否 | 為空則讀取`text`屬性 | | | extra | 提示信息 | string | 否 | 表格內的欲加入標題中的行字段 | | |hidden|是否隱藏按鈕|function\|bool|否|| |disable|是否禁用按鈕|function\|bool|否|| | url | 請求鏈接 | string\|function | 是 | | | | field | 綁定行字段 | string | 否 | id | 會自動根據此字段生成鏈接后綴 | | extend | 擴展屬性 | string | 否 | | 例如彈出層全屏操作，可以加上：`data-full="true"` | > 示例 ~~~ operat: [ [{ text: '編輯', title: '編輯', //text和title也可以是函數示例如下 title: function(row){ return row.title; }, extra:'name', url: Table.init.edit_url, //url也可以是函數示例如下 url: function(row) { return 'user.user/edit?id=' + row.id; }, hidden: function(row) { //為true隱藏按鈕 return row.page_type == '1'; }, class: 'layui-btn layui-btn-xs layui-btn-success', extend: 'lay-event="btn-edit"', }, { text: '入庫', url: Table.init.stock_url, class: 'layui-btn layui-btn-xs layui-btn-normal btn-ajax', }], 'delete'] ~~~ ***** ## 搜索表單生成器提供快捷搜索表單生成器，根據table表格初始化時的列參數進行動態生成。 | 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 | | --- | --- | --- | --- | --- | --- | | search | 搜索類型 | string/bool | 否 | true | 可用值，請參考下方參數說明 | | searchOp | 搜索條件 | string | 否 | like | 可用值，請參考下方參數說明 | | searchTip | 搜索提示語 | string | 否 | 默認獲取`title`參數值自動生成 | | | searchValue | 表單初始化值 | string | 否 | | | | selectList | 下拉列表值 | object | 否 | | { 0: '待審核', 1: '通過' }| | fieldAlias | 字段別名 | string | 否 | 與`field`參數相等 | 某些特殊情況下才需要，正常用不上 | #### `search`搜索類型： * `false`關閉搜索 * `true`開啟搜索 * `select`下拉選擇 * `range`時間范圍 * `between`區間格式 * `time`時間格式 #### `searchOp`搜索條件： > 用于查詢時的操作符，默認為=，支持!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false ***** # 自定義搜索如果我們需要完全自定義我們的通用搜索欄，我們可以在配置`table.render`時定義`searchFormTpl`選項來完全重寫我們的通用搜索欄。