开发者中心

# 列表特殊显示

# 概述

本功能用于实现列表中的特殊显示需求。大部分列表直接显示原始值即可，但有些情况需要特殊处理：如账号显示为姓名、部门ID显示为部门名称、日期按格式显示、布尔值显示为“是/否”、英文代号显示为中文等。

# 一、示例演示：特殊列显示

# 演示路径

  • 访问地址：应用中心
  • 模块名称：特殊列显示

# 业务处理效果

预置列：

  • 账号原始值显示账号，账号显示显示员工姓名
  • 部门原始值显示部门ID，部门显示显示部门名称
  • 附件显示附件列表，图片显示缩略图

常用显示格式：

  • 日期：精确到天（Y-m-d）或精确到分钟（Y-m-d H:i）
  • 数字：保留小数、千分位、取整显示
  • 布尔值：显示为“是/否”或“紧急/空”

自定义显示：

  • 合同类别原始值：Material、OfficeSupplies、Equipment
  • 合同类别显示值：原材料采购、办公用品采购、设备采购

存id显示名字：

  • 设备维修记录中，实际存储设备ID，列表显示设备名称

# 二、实现方法

# 预置列

文件路径：wwwroot\Apps\samples\GridColumnSpecialColumn.js

// 第30-54行：使用预置列
{ text: '编号', dataIndex: 'Id', width: 30, hidden: true },
{
    text: '账号', columns: [
        { text: '账号原始值', dataIndex: 'Accounts', width: 120 },
        { text: '账号显示', xtype: 'yzuserscolumn', dataIndex: 'Accounts', width: 200 }
    ]
},
{
    text: '部门', columns: [
        { text: '部门原始值', dataIndex: 'OuIds', width: 360 },
        { text: '部门显示', xtype: 'yzouscolumn', dataIndex: 'OuIds', width: 220 }
    ]
},
{
    text: '附件', columns: [
        { text: '附件原始值', dataIndex: 'AttachmentsIds', width: 120 },
        { text: '附件显示', xtype: 'yzattachmentcolumn', dataIndex: 'AttachmentsIds', width: 220 }
    ]
},
{
    text: '图片附件', columns: [
        { text: '图片原始值', dataIndex: 'ImageAccactmentIds', width: 120 },
        { text: '图片显示', xtype: 'yzimgattachmentcolumn', dataIndex: 'ImageAccactmentIds', width: 120 }
    ]
}

代码说明：

  • xtype：指定列类型，使用系统预置的列组件
  • yzuserscolumn：账号列，接受账号显示员工姓名
  • yzouscolumn：部门列，接受部门ID显示部门名称
  • yzattachmentcolumn：附件列，显示附件列表
  • yzimgattachmentcolumn：图片列，显示图片缩略图
  • 预置列位置：wwwroot\Yiez\src\grid\column目录下

# 常用显示格式

文件路径：wwwroot\Apps\samples\GridColumnFormatter.js

// 第23-45行：日期、数字、布尔值显示格式
{
    text: '日期与时间', columns: [
        { text: '原始值', xtype: 'datecolumn', dataIndex: 'DataTime', width: 160, align: 'left', format: 'Y-m-d H:i:s' },
        { text: '年月日', xtype: 'datecolumn', dataIndex: 'DataTime', width: 160, align: 'left', format: 'Y-m-d' },
        { text: '年月日 时分', xtype: 'datecolumn', dataIndex: 'DataTime', width: 160, align: 'left', format: 'Y-m-d H:i' }
    ]
},
{
    text: '数字', columns: [
        { text: '原始值', dataIndex: 'Decimal', width: 120, align: 'end' },
        { text: '小数', xtype: 'numbercolumn', dataIndex: 'Decimal', width: 120, align: 'end', format: '0.00' },
        { text: '千分位', xtype: 'numbercolumn', dataIndex: 'Decimal', width: 120, align: 'end', format: '0,000.00' },
        { text: '整数', xtype: 'numbercolumn', dataIndex: 'Decimal', width: 120, align: 'end', format: '0' },
        { text: '千分位', xtype: 'numbercolumn', dataIndex: 'Decimal', width: 120, align: 'end', format: '0,000' }
    ]
},
{
    text: '布尔', columns: [
        { text: '原始值', dataIndex: 'Boolean', width: 100, align: 'center'},
        { text: '是/否', xtype: 'booleancolumn', dataIndex: 'Boolean', width: 100, align: 'center', trueText: '是', falseText: '否' },
        { text: '紧急', xtype: 'booleancolumn', dataIndex: 'Boolean', width: 100, align: 'center', trueText: '紧急', falseText: '' }
    ]
}

代码说明：

  • datecolumn：日期列，通过format控制显示格式
  • numbercolumn：数字列，通过format控制小数位和千分位
  • booleancolumn：布尔列，通过trueText和falseText控制显示文字

# 自定义显示

文件路径：wwwroot\Apps\samples\GridColumnCustomRenderer.js

// 使用自定义渲染函数
{
    text: '合同类别（显示值）', 
    dataIndex: 'ContractType', 
    flex: 1, 
    renderer: me.renderContractType  // 指定自定义渲染函数
}

// 自定义渲染函数
renderContractType: function (value, metaData, record) {
    switch (value) {
        case 'Material':
            return '原材料采购';
        case 'OfficeSupplies':
            return '办公用品采购';
        case 'Equipment':
            return '设备采购';
        default:
            return value;
    }
}

代码说明：

  • renderer：指定自定义渲染函数
  • 渲染函数参数：value为原始值，metaData可设置文字颜色、背景等样式
  • 返回值：显示在列表中的内容

# 存id显示名字

文件路径：wwwroot\Apps\samples\DeviceRepair.js

// 绑定关联数据的子字段
{ text: '设备名称', dataIndex: 'Device.DeviceName', width: 160, align: 'left', sortable: true }

代码说明：

  • 维修主数据中包含所维修设备的详细信息
  • 通过Device.DeviceName绑定关联数据中的子字段
  • 后台需使用Include语法让维修主数据包含设备的关联数据（详见“存id显示名字”章节）

# 三、实现方式对比

实现方式 适用场景 实现方法
预置列 账号、部门、附件、图片等常用类型 使用系统预置的xtype
常用显示格式 日期格式、数字格式、布尔值显示 使用format、trueText等属性
自定义显示 枚举值转中文、复杂逻辑转换 使用renderer自定义函数
存id显示名字 关联表数据展示 绑定关联字段的子字段

# 四、配置步骤

# 操作步骤

  1. 优先使用预置列：检查wwwroot\Yiez\src\grid\column目录，有预置列直接使用xtype
  2. 使用常用显示格式：日期用datecolumn+format，数字用numbercolumn+format，布尔用booleancolumn+trueText/falseText
  3. 自定义显示：添加renderer属性，指向自定义渲染函数
  4. 存id显示名字：绑定关联数据的子字段，后台使用Include加载关联数据

# 关键要点

  • 预置列优先：优先使用系统预置列，减少开发工作量
  • format格式：日期Y-m-d H:i:s，数字0,000.00
  • renderer函数：可控制显示内容和样式
  • 关联数据：前台绑定子字段，后台需Include加载

# 五、常见应用场景

场景 原始值 显示值 实现方式
员工姓名 账号 员工姓名 预置列yzuserscolumn
部门名称 部门ID 部门名称 预置列yzouscolumn
日期显示 时间戳 2025-01-15 datecolumn+format
金额显示 12345.67 12,345.67 numbercolumn+format
审批状态 Approved 已通过 renderer自定义函数
关联表数据 设备ID 设备名称 绑定子字段

# 六、注意事项

  1. 预置列引入：使用预置列前需在requires中引入对应的列组件
  2. format格式：注意大小写，Y表示四位年份，y表示两位年份
  3. renderer参数：metaData可设置metaData.tdCls或metaData.style改变样式
  4. 关联数据加载：前台绑定子字段后，后台必须使用Include加载关联数据

# 七、总结

列表特殊显示的实现非常便捷：

需求 实现方式 工作量
账号→姓名 预置列yzuserscolumn 一行代码
部门ID→名称 预置列yzouscolumn 一行代码
日期格式化 datecolumn+format 一行代码
数字格式化 numbercolumn+format 一行代码
布尔→文字 booleancolumn+trueText 一行代码
枚举转中文 renderer自定义函数 几行代码
关联表显示 绑定子字段 一行代码

处理特殊显示需求时，优先使用预置列，其次是常用显示格式，最后考虑自定义显示。

← 排错 →