## 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`选项来完全重写我们的通用搜索栏。