# 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 | 否 | 需用刪除功能必填 | | modify_url | 屬性修改接口 | string | 否 | 需用屬性修改功能必填（例如：狀態的切換） | > 代碼示例 ``` var init = { table_elem: '#currentTable', add_url: "{:url('add',['catid'=>$catid])}", delete_url: "{:url('del',['catid'=>$catid])}", modify_url: '{:url("listorder",["catid"=>$catid])}', }; ``` ***** # 表格實例化 表格實例化方法為`yznTable.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'] | 除了這些內置的，還可以自己進行擴展 | > 代碼示例 ``` yznTable.render({ init: init, toolbar: [...表格toolbar...], cols: [...請參考下方列參數...], }); ``` ***** # 擴展列參數 列參數完美兼容layui的table所有列參數，具體請查看layui官網。 ***** # 表格toolbar操作欄 * 默認內置有四種toolbar操作方法，分別是： * `refresh` * `add` * `delete` * 另外可以根據下方提供的參數進行自定義擴展 | 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 | | --- | --- | --- | --- | --- | --- | | class | 樣式信息 | string | 否 | | | | icon | 圖標信息 | string | 否 | | 在行操作里面，不建議使用圖標 | | title | 提示信息 | string | 否 | 為空則讀取`text`屬性 | | | text | 文本信息 | string | 否 | 為空則讀取`title`屬性 | | | method | 執行方式 | string | 否 | open | 可用值，請參考下方參數說明 | | url | 請求鏈接 | string | 是 | | | | checkbox | 是否多選 | bool | 否 | false | 如果為true, 不管是彈出層還是直接請求, 請求時會攜帶上勾選的id值 | | extend | 擴展屬性 | string | 否 | | 例如彈出層全屏操作，可以加上：`data-full="true"` | > 相關參數說明 * `method`執行方式： * `open`彈出層打開 * `request`直接請求 * `none`需要配合extend自定義參數內容 > 代碼示例 ``` toolbar: ['refresh', [{ text: '添加', url: init.add_url, method: 'open', class: 'layui-btn layui-btn-normal layui-btn-sm', icon: 'iconfont icon-add', extend: 'data-full="true"' }], 'delete'] ``` ***** # 列operat操作欄 * 默認內置有兩種operat操作方法，分別是： * `edit` * `delete * 另外可以根據下方提供的參數進行自定義擴展 | 參數 | 說明 | 類型 | 是否必填 | 默認值 | 備注 | | --- | --- | --- | --- | --- | --- | | class | 樣式信息 | string | 否 | | | | icon | 圖標信息 | string | 否 | | | | text | 文本信息 | string\|function | 否 | | | | title | 提示信息 | string\|function | 否 | 為空則讀取`text`屬性 | | | extra | 提示信息 | string | 否 | 表格內的欲加入標題中的行字段 | | |hidden|是否隱藏按鈕|function\|bool|否|| |disable|是否禁用按鈕|function\|bool|否|| | method | 執行方式 | string | 否 | open | 可用值，請參考下方參數說明 | | url | 請求鏈接 | string\|function | 是 | | | | field | 綁定行字段 | string | 否 | id | 會自動根據此字段生成鏈接后綴 | | extend | 擴展屬性 | string | 否 | | 例如彈出層全屏操作，可以加上：`data-full="true"` | > 相關參數說明 * `method`執行方式： * `open`彈出層打開 * `request`直接請求 * `none`需要配合extend自定義參數內容 > 示例 ~~~ operat: [ [{ text: '編輯', title: '編輯', //text和title也可以是函數 示例如下（YznCMS1.4.1+新增） title: function(row){ return row.title; }, extra:'name', url: init.edit_url, //url也可以是函數 示例如下 url: function(row) { return '{:url("sethome")}?id=' + row.id; }, hidden: function(row) { //為true隱藏按鈕 return row.page_type == '1'; }, method: 'open', class: 'layui-btn layui-btn-xs layui-btn-success', extend: 'data-full="true"', }, { text: '入庫', url: init.stock_url, method: 'open', class: 'layui-btn layui-btn-xs layui-btn-normal', }], '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`選項來完全重寫我們的通用搜索欄，目前在`YznCMS1.4.2+`版本支持該功能。