EasyAdmin 开发文档

EasyAdmin

Layuimini

EasyAdmin

Layuimini

Appearance

table 列表 ​

虽然 layui 已经提供了很多方便的方法，但是还是不够简便，目前系统对 layui table 模块进行了重新封装，并兼容所有的 layui table 的方法。

使得开发起来更加得心应手，减轻工作量。

init初始化配置 ​

建议在此处统一配置 table 容器以及相关的链接地址。另外还可以自己进行扩展属性。

初始化的参数有

参数说明类型是否必填备注
table_elemtable 容器或者 domstring/dom是
table_render_id容器唯一 idstring否
index_url列表接口string是
add_url添加接口string否需用添加功能必填
edit_url编辑接口string否需用编辑功能必填
delete_url删除接口string否需用删除功能必填
export_url导出接口string否需用导出功能必填
modify_url属性修改接口string否需用属性修改功能必填（例如：状态的切换）

实例，下方stock_url就是扩展属性

js
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 官网查看。

参数说明类型是否必填默认值备注
initinit初始化配置object是一般情况下，请传入上方配置好的初始化参数
search是否开启搜索功能bool否true开启会自动根据列生成搜索表单
modifyReload修改属性时是否刷新表格bool否true
toolbartable 操作栏object否['refresh','add','delete','export']除了这些内置的，还可以自己进行扩展

代码示例

js
ea.table.render({
        init: init,
        toolbar: [...表格toolbar...],
        cols: [...请参考下方列参数...],
    });

表格 toolbar 操作栏 ​

  • 默认内置有四种 toolbar 操作方法，分别是：
    • refresh
    • add
    • delete
    • export
  • 另外可以根据下方提供的参数进行自定义扩展
参数说明类型是否必填默认值备注
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 自定义参数内容

示例

js
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 范围搜索

代码示例

js
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 操作方法，分别是：
    • edit
    • delete
  • 另外可以根据下方提供的参数进行自定义扩展
参数说明类型是否必填默认值备注
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 自定义参数内容

示例

js
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列操作栏自动生成列操作栏

示例

js
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}
    ]],

完整例子 ​

js
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;
});

请尊重他人劳动成果，未经授权禁止转载！

Copyright © 2019-present Ethan