Skip to main content

行按钮动态显示控制

概念说明

本文档是 视图列表 概念的具体配置说明。建议先阅读视图列表概念，了解整体架构。

视图列表行按钮支持动态显示控制，可以根据行数据的具体内容决定按钮是否显示。

功能概述​

视图列表行按钮支持两种显示控制模式：

模式说明适用场景
简单模式基于字段值的匹配规则简单的等于/不等于判断
高级模式基于动态脚本的自定义逻辑复杂的条件判断

简单模式​

配置步骤​

  1. 在视图列表行按钮配置中，选择 展示控制模式 为 简单模式
  2. 配置以下参数：
    • 依赖行数据字段：选择要匹配的字段
    • 匹配方式：选择等于或不等于
    • 依赖行数据字段值：输入要匹配的值

工作原理​

当列表行数据中的指定字段值与配置值匹配时，按钮会根据匹配方式决定是否显示。

示例​

配置说明
依赖字段：status
匹配方式：等于
字段值：active当 status 字段值为 "active" 时显示按钮

高级模式​

配置步骤​

  1. 在视图列表行按钮配置中，选择 展示控制模式 为 高级模式
  2. 点击 编辑脚本 按钮，在弹出的编辑器中编写自定义脚本

脚本结构​

function buttonTrigger(api, data) {
    // 自定义逻辑
    
    // Default: show button
    // api.show();
}

API 说明​

脚本中可以使用以下 API 控制按钮显示：

API功能参数示例
api.show()显示按钮无api.show();
api.hide()隐藏按钮无api.hide();
api.setVisible(visible)设置按钮可见性visible: booleanapi.setVisible(true);

数据结构​

传递给脚本的 data 参数是一个普通对象，结构如下：

{
  "字段编码1": "字段值1",
  "字段编码2": "字段值2",
  // 更多字段...
}
注意

字段编码对应于对象中的字段 Code，值对应于字段的 Value。

脚本示例​

示例 1：基于状态字段控制按钮显示​

function buttonTrigger(api, data) {
    // 当状态不为 'active' 时隐藏按钮（默认显示）
    if (data.status !== 'active') {
        api.hide();
    }
}

示例 2：基于多个字段的复杂逻辑​

function buttonTrigger(api, data) {
    // 当状态不为 'active' 或年龄不大于 18 时隐藏按钮
    if (data.status !== 'active' || data.age <= 18) {
        api.hide();
    }
}

示例 3：基于字段值范围控制​

function buttonTrigger(api, data) {
    // 当分数不在 60-100 之间时隐藏按钮
    const score = parseInt(data.score);
    if (score < 60 || score > 100) {
        api.hide();
    }
}

示例 4：基于字符串包含关系​

function buttonTrigger(api, data) {
    // 当名称不包含 'admin' 时隐藏按钮
    if (!data.name || !data.name.includes('admin')) {
        api.hide();
    }
}

示例 5：基于审批状态控制​

function buttonTrigger(api, data) {
    // 只有审批状态为"待审批"时显示审批按钮
    if (data.approvalStatus !== 'pending') {
        api.hide();
    }
}

注意事项​

  1. 脚本执行错误处理：如果脚本执行出错，按钮会默认显示
  2. 性能考虑：脚本执行应该尽量简洁，避免复杂的计算或网络请求
  3. 数据类型：字段值的类型取决于字段定义，使用时请注意类型转换
  4. 调试：可以在脚本中使用 console.log() 进行调试，输出会显示在浏览器控制台

最佳实践​

保持脚本简洁​

只包含必要的逻辑，避免复杂的计算：

// 推荐：简洁明了
function buttonTrigger(api, data) {
    if (data.status !== 'active') {
        api.hide();
    }
}

// 不推荐：复杂计算
function buttonTrigger(api, data) {
    // 避免在脚本中进行复杂计算
    const result = complexCalculation(data);
    if (!result) {
        api.hide();
    }
}

添加注释​

清晰说明脚本的目的和逻辑：

function buttonTrigger(api, data) {
    // 只有在编辑模式且状态为草稿时显示发布按钮
    if (data.status !== 'draft') {
        api.hide();
    }
}

处理边界情况​

考虑字段值为空或未定义的情况：

function buttonTrigger(api, data) {
    // 处理字段值为空的情况
    if (!data.status || data.status === '') {
        api.hide();
        return;
    }
    
    if (data.status !== 'active') {
        api.hide();
    }
}

测试​

在不同数据场景下测试脚本的行为：

  • 字段值为空
  • 字段值为预期值
  • 字段值为非预期值

故障排除​

脚本不执行​

检查以下几点：

  1. 脚本语法是否正确
  2. 确保脚本函数名正确（buttonTrigger）
  3. 检查浏览器控制台是否有错误信息

按钮显示不符合预期​

检查以下几点：

  1. 脚本逻辑是否正确
  2. 验证数据结构是否符合预期
  3. 使用 console.log(data) 查看传递给脚本的数据

API 不生效​

检查以下几点：

  1. 确保正确调用 API 方法（api.show(), api.hide(), api.setVisible()）
  2. 检查 API 调用是否在条件逻辑中正确执行

相关文档​