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操作方法，分别是：
refreshadddeleteexport
- 另外可以根据下方提供的参数进行自定义扩展
| 参数 | 说明 | 类型 | 是否必填 | 默认值 | 备注 |
|---|---|---|---|---|---|
| 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直接请求none需要配合extend自定义参数内容
示例
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操作方法，分别是：
editdelete
- 另外可以根据下方提供的参数进行自定义扩展
| 参数 | 说明 | 类型 | 是否必填 | 默认值 | 备注 |
|---|---|---|---|---|---|
| class | 样式信息 | string | 否 | ||
| icon | 图标信息 | string | 否 | 在行操作里面，不建议使用图标 | |
| title | 提示信息 | string | 否 | 为空则读取text属性 |
|
| extra | 提示信息 | string | 否 | 表格内的欲加入标题中的行字段 | |
| text | 文本信息 | string | 否 | 为空则读取title属性 |
|
| method | 执行方式 | string | 否 | open | 可用值，请参考下方参数说明 |
| url | 请求链接 | string | 是 | ||
| auth | 权限规则 | string | 是 | 权限规则，具体请参考配置auth权限验证模块 |
|
| field | 绑定行字段 | string | 否 | id | 会自动根据此字段生成链接后缀 |
| extend | 扩展属性 | string | 否 | 例如弹出层全屏操作，可以加上：data-full="true" |
相关参数说明
method执行方式：open弹出层打开request直接请求none需要配合extend自定义参数内容
示例
operat: [
[{
text: '编辑',
extra:'name',
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;
});