# 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+`版本支持该功能。