Table Widget 用于列表界面制作。 Table DSL 文件放在 tables 目录中, 文件扩展名为 .tab.yao。

约定

1. 示例中约定应用根目录为 /data/app, 实际编写时需替换为应用根目录。
2. 使用 <> 标识自行替换的内容。 例如: icon-<图标名称>, 实际编写时应替换为: icon-foo, icon-bar ...

命名

DSL 文件命名:

1. 由 小写字母, 下划线 “_”, 横杠 "-" 组成,
2. 必须由 小写字母 开头,
3. Widget ID 为文件名称(不含扩展名), 如包含多级目录用 "." 替代 "\/"

路由

默认:

http://<IP|域名>:<YAO_PORT>/<管理后台路由前缀>/x/Table/<Widget ID>

Query 参数:

http://<IP|域名>:<YAO_PORT>/<管理后台路由前缀>/x/Table/<Widget ID>?<URLQuery Params>

表格数据交互。用于指定列表检索、保存等操作的处理器，设置数据 Hook，绑定模型等

绑定 model 或 table。 根据关联 Widget ID 设定表格关联处理器和界面呈现默认值

{
  "name": "::Bind Model",
  "action": {
    "bind": {
      "model": "pet",
      "option": { "form": "pet" } //
    },

    // 自定义关联处理器
    "search": {
      "guard": "-", // 鉴权方式
      "process": "scripts.pet.Search", // 调用处理器
      "default": [null, 1, 5] // 默认参数表
    }
  }
}

关联处理器默认值:

数据表字段类型与表格字段定义 fields 映射表:

https://github.com/YaoApp/yao/blob/main/yao/fields/model.trans.json

同时绑定表单:

如果将 bind.option.form 指定为 Form Widget ID, 表格将增加新增、查看、编辑功能。

{
  "name": "::Pet Admin Bind Table",
  "action": {
    "bind": { "table": "bind.pet" },
    "search": {
      "guard": "-",
      "process": "scripts.pet.Search",
      "default": [null, 1, 2]
    }
  }
}

复制指定 Table Widget ID 的表格, 在次表格基础上微调，创建一张新的表格。

使用关联处理器指定表格数据读取、写入逻辑。

在关联处理器之前运行，一般用于处理参数表数据。

{
  "name": "::Pet Admin Bind Table",
  "action": {
    "bind": { "model": "pet" },
    "before:search": "scripts.pet.BeforeSearch" // 设定 Hook 处理器
  }
}

/data/app/scripts/pet.js Hook 脚本

/**
 * 在关联处理器 search 之前运行
 * @param query 查询参数
 * @param page 当前页面
 * @param pagesize 每页显示记录数
 */
function BeforeSearch(query, page, pagesize) {
  return [query, page, pagesize];
}

/**
 * 在关联处理器 get 之前运行
 * @param query 查询参数
 */
function BeforeGet(query) {
  return [query];
}

/**
 * 在关联处理器 find 之前运行
 * @param id 数据记录主键数值
 * @param query 查询参数
 */
function BeforeFind(id, query) {
  return [id, query];
}

/**
 * 在关联处理器 save 之前运行
 * @param payload 用户提交数据记录
 */
function BeforeSave(payload) {
  return [payload];
}

/**
 * 在关联处理器 create 之前运行
 * @param payload 用户提交数据记录
 */
function BeforeCreate(payload) {
  return [payload];
}

/**
 * 在关联处理器 update 之前运行
 * @param id 数据记录主键数值
 * @param payload 用户提交数据记录
 */
function BeforeUpdate(id, payload) {
  return [payload];
}

/**
 * 在关联处理器 delete 之前运行
 * @param id 数据记录主键数值
 * @param query 查询参数
 */
function BeforeDelete(id) {
  return [id];
}

/**
 * 在关联处理器 insert 之前运行
 * @param columns 字段清单 ["id", "name", "status"...]
 * @param values 与字段对应的数值列表 [[1, "foo", "enabled"], [2, "bar", "disabled"]]
 */
function BeforeInsert(columns, values) {
  return [columns, values];
}

/**
 * 在关联处理器 update-in 之前运行
 * @param ids 主键列表
 * @param payload 更新字段
 */
function BeforeUpdateIn(ids, payload) {
  return [ids, payload];
}

/**
 * 在关联处理器 update-where 之前运行
 * @param query 查询条件
 * @param payload 更新字段
 */
function BeforeUpdateWhere(query, payload) {
  return [query, payload];
}

/**
 * 在关联处理器 delete-in 之前运行
 * @param ids 主键列表
 */
function BeforeDeleteIn(ids) {
  return [ids];
}

/**
 * 在关联处理器 delete-where 之前运行
 * @param query 查询条件
 */
function BeforeDeleteWhere(query) {
  return [query];
}

在关联处理器之后运行，一般用于处理结果集数据。

{
  "name": "::Pet Admin Bind Table",
  "action": {
    "bind": { "model": "pet" },
    "after:search": "scripts.pet.AfterSearch" // 设定 Hook 处理器
  }
}

/data/app/scripts/pet.js Hook 脚本

/**
 * 在关联处理器 search 之后运行
 * @param result 处理器运行结果
 */
function AfterSearch(result) {
  return result;
}

/**
 * 在关联处理器 get 之后运行
 * @param result 处理器运行结果
 */
function AfterGet(result) {
  return result;
}

/**
 * 在关联处理器 find 之后运行
 * @param result 处理器运行结果
 */
function AfterFind(result) {
  return result;
}

/**
 * 在关联处理器 save 之后运行
 * @param result 处理器运行结果
 */
function AfterSave(result) {
  return result;
}

/**
 * 在关联处理器 create 之后运行
 * @param result 处理器运行结果
 */
function AfterCreate(result) {
  return result;
}

/**
 * 在关联处理器 update 之后运行
 * @param result 处理器运行结果
 */
function AfterUpdate(result) {
  return result;
}

/**
 * 在关联处理器 delete 之后运行
 * @param result 处理器运行结果
 */
function AfterDelete(result) {
  return result;
}

/**
 * 在关联处理器 insert 之后运行
 * @param result 处理器运行结果
 */
function AfterInsert(result) {
  return result;
}

/**
 * 在关联处理器 update-in 之后运行
 * @param result 处理器运行结果
 */
function AfterUpdateIn(result) {
  return result;
}

/**
 * 在关联处理器 update-where 之后运行
 * @param result 处理器运行结果
 */
function AfterUpdateWhere(result) {
  return result;
}

/**
 * 在关联处理器 delete-in 之后运行
 * @param result 处理器运行结果
 */
function AfterDeleteIn(result) {
  return result;
}

/**
 * 在关联处理器 delete-where 之后运行
 * @param result 处理器运行结果
 */
function AfterDeleteWhere(result) {
  return result;
}

表格界面布局。显示字段、筛选器、批量编辑等

表格界面头部布局。设置批量操作、导入配置等

{
  "preset": {
    // 批量操作设定
    "batch": {
      // 可批量操作的字段
      "columns": [
        { "name": "名称", "width": 12 }, // name: fields.table 中定义的字段名称; width: 字段宽度, 24 栅格
        { "name": "消费金额", "width": 12 },
        { "name": "入院状态", "width": 12 }
      ],
      "deletable": true // 批量删除按钮
    },

    // 关联数据导入项
    "import": {
      "name": "pet", // Import Widget ID
      "actions": [
        {
          "title": "跳转",
          "icon": "icon-airplay", // 按钮图标, 可用图标 https://feathericons.com/

          // 按钮响应操作 KEY: 执行动作, VALUE: 参数表
          "action": {
            "History.push": { "payload": "/404" }
          }
        }
      ] // 数据导入界面操作按钮链接
    }
  },

  // 自定义操作按钮
  "actions": [
    {
      "title": "页面跳转", // 按钮名称
      "icon": "icon-airplay", // 按钮图标, 可用图标 https://feathericons.com/

      // 按钮响应操作 KEY: 执行动作, VALUE: 参数表
      "action": {
        "History.push": { "payload": "/404" }
      }
    },
    {
      "title": "云函数",
      "icon": "icon-cloud",
      "action": {
        // 调用 /data/app/services/foo.js 中定义的 function Bar(...args){} 方法
        "Service.foo": { "method": "Bar", "args": ["foo", "bar"] }
      }
    },
    {
      "title": "Studio 方法",
      "icon": "icon-layers",
      "action": {
        // 调用 /data/app/studio/hello.js 中定义的 function World(...args){} 方法
        // **仅开发模式下有效**
        "Studio.hello": { "method": "World", "args": ["hello", "world"] }
      }
    }
  ]
}

可用自定义操作 actions[*].action

表格筛选器。设置筛选条件和右上角操作按钮等

{
  // 支持筛选的字段清单
  "columns": [
    { "name": "名称", "width": 4 }, // name: fields.filter 中定义的字段名称; width: 字段宽度, 24 栅格
    { "name": "状态", "width": 4 }
  ],

  // 自定义操作按钮
  "actions": [
    {
      "title": "添加宠物", // 按钮名称
      "icon": "icon-plus", // 按钮图标, 可用图标 https://feathericons.com/
      "width": 3, // 操作按钮宽度, 24 栅格

      // 按钮响应操作 KEY: 执行动作, VALUE: 参数表
      "action": {
        "Common.openModal": {
          "width": 640,
          "Form": { "type": "edit", "model": "pet" }
        }
      }
    },
    {
      "title": "云函数",
      "icon": "icon-cloud",
      "action": {
        // 调用 /data/app/services/foo.js 中定义的 function Bar(...args){} 方法
        "Service.foo": { "method": "Bar", "args": ["foo", "bar"] }
      }
    },
    {
      "title": "Studio 方法",
      "icon": "icon-layers",
      "action": {
        // 调用 /data/app/studio/hello.js 中定义的 function World(...args){} 方法
        // **仅开发模式下有效**
        "Studio.hello": { "method": "World", "args": ["hello", "world"] }
      }
    }
  ]
}

可用自定义操作 actions[*].action

表格布局。设置显示列，行操作按钮等

operation Object

{
  "columns": [
    { "name": "名称", "width": 200 }, // name: fields.table 中定义的字段名称; width: 字段宽度, 单位 px
    { "name": "消费金额" },
    { "name": "入院状态" }
  ],
  "operation": {
    "fold": false,
    "width": 255,

    // 行操作按钮
    "actions": [
      {
        "title": "查看", // 按钮名称
        "icon": "icon-eye", // 按钮图标, 可用图标 https://feathericons.com/

        // 按钮响应操作 KEY: 执行动作, VALUE: 参数表
        "action": {
          "Common.openModal": {
            "width": 640,
            "Form": { "type": "view", "model": "pet" }
          }
        }
      },
      {
        "title": "治愈 {{name}}", // 使用 {{<字段名称>}} 引用表单数据
        "icon": "icon-check",
        "action": {
          "Table.save": { "id": ":id", "status": "cured" }
        },
        "style": "success",
        "confirm": { "title": "提示", "desc": "确认变更为治愈状态？{{name}}" }
      },
      {
        "title": "云函数",
        "icon": "icon-cloud",
        "action": {
          // 调用 /data/app/services/foo.js 中定义的 function Bar(...args){} 方法, 使用 {{<字段名称>}} 引用表单数据
          "Service.foo": { "method": "Bar", "args": ["{{id}}", "{{name}}"] }
        }
      },
      {
        "title": "Studio 方法",
        "icon": "icon-layers",
        "action": {
          // 调用 /data/app/studio/hello.js 中定义的 function World(...args){} 方法, 使用 {{<字段名称>}} 引用表单数据
          // **仅开发模式下有效**
          "Studio.hello": { "method": "World", "args": ["{{id}}", "{{name}}"] }
        }
      }
    ]
  }
}

可用自定义操作 actions[*].action

表格字段定义。指定表格列字段, 表格筛选器字段定义

表格筛选器字段定义

KEY: 筛选器字段名称, VALUE: 字段定义

{
  "医生": {
    "bind": "where.doctor_id.eq", // query 名称, 例: /api/__yao/table/pet/search?where.doctor_id.eq=xxx

    // 用户输入组件
    "edit": {
      "type": "Select", // 组件名称, 可用组件参考文档 https://yaoapps.com/components

      // 组件参数表
      "props": {
        "placeholder": "请选择医生",
        "xProps": {
          // 在字段名称前加 $ 前缀, 并指定处理器，将自动将处理器解析为 API
          "$remote": {
            "process": "scripts.doctor.SelectOption",
            "query": { "limit": 200 }
          }
        }
      }
    }
  }
}

表格列字段定义

KEY: 表格列字段名称, VALUE: 字段定义

{
  "名称": {
    "bind": "name", // 默认绑定API接口返回字段名称

    // 字段数据呈现组件
    "view": {
      "bind": "name_view", // 绑定字段名称，如不指定使用默认值
      "type": "Text", // 组件名称, 可用组件参考文档 https://yaoapps.com/components

      // 数据数值计算
      // 参数表:
      //   $C(row) 当前行数据,
      //   $C(value) 当前行当前字段数值,
      //   $C(props) 当前组件 props,
      //   $C(type) 当前组件 type,
      //   $C(id) 当前 Widget ID
      //   'hello' 字符串常量
      //   1024 整形常量
      //   0.618 浮点型常量
      "compute": {
        "process": "Concat", // 处理器名称
        "args": ["$C(row.name)", "-", "$C(row.status)"]
      },

      "props": {}
    },

    // 字段数据编辑组件 (点击字段后弹出的编辑器)
    "edit": {
      "bind": "name", // 绑定字段名称，如不指定使用默认值
      "type": "Input", // 组件名称, 可用组件参考文档 https://yaoapps.com/components

      // 数据数值计算 (简写)
      // 默认参数表: ["$C(value)", "$C(props)", "$C(type)", "$C(id)"]
      "compute": "scripts.pet.FormatName",
      "props": { "placeholder": "请输入宠物名称" }
    }
  },
  "医生": {
    "bind": "doctor_id",
    "view": { "type": "Text" },
    "edit": {
      "type": "Select",
      "props": {
        "placeholder": "请选择医生",
        "xProps": {
          // 在字段名称前加 $ 前缀, 指定处理器名称和参数，自动将处理器解析为 API
          "$remote": {
            "process": "scripts.doctor.SelectOption",
            "query": { "pet_type": "{{ type }}" }
          }
        }
      }
    }
  }
}

在 edit.props 和 view.props 中使用动态数据

...

内建 Compute 处理器

表格界面配置项。表格满屏显示等配置

Table Widget API

Table Widget 处理器