主要内容

将表添加到使用 App 设计工具创建的 App

要在使用 App 设计工具创建的 App 中显示表格数据,请使用表 UI 组件。您可以通过对列进行排序或重新排列,或通过在 App 中选择行、列或单元格,来配置 App 用户与该数据的交互选项。

要将表 UI 组件添加到使用 App 设计工具创建的 App,您必须同时在设计视图代码视图中工作。

使用设计视图可执行以下操作:

  • 创建表 UI 组件。

  • 指定行和列名称。

  • 指定可排序性和可编辑性等交互选项。

代码视图中创建一个 StartupFcn 回调以:

  • 在表 UI 组件中填充表数据。

  • 配置数据外观。

要查看本页描述的所有步骤的实现,请参阅在 App 中创建交互式表

创建表并配置表行为

设计视图中,按照以下步骤将表 UI 组件添加到您的 App:

  1. 组件库中将组件拖到 App 画布上。

  2. 组件浏览器中选择表 UI 组件。

  3. 要配置表的列信息,请点击列相关表属性右侧的 vertical ellipsis 按钮。使用编辑器以交互方式添加和重命名表列。您还可以为每列指定交互选项,例如当用户在 App 中与表交互时该列是否可编辑或可排序。

    Component Browser with a table UI component selected and the table column editor open

  4. 要配置行名称,请使用组件浏览器中的 RowName 字段。但是,行名称仅在 App 运行时表填充数据后才会出现,因此在设计视图中不显示。

填充表数据

代码视图中,使用以下步骤在 StartupFcn 回调中填充表数据。此回调在用户运行 App 时执行。

  1. 组件浏览器中,右键点击 App 节点并选择回调 > 添加 StartupFcn 回调。App 节点与您的 MLAPP 文件同名。

    Context menu for the app node in the Component Browser

  2. 代码视图中的 startupFcn 回调代码中,使用 Data 属性以编程方式将表数据赋给表 UI 组件。例如,以下代码读取示例患者数据并用该数据填充表。它还在表 UI 组件中显示部分数据。

    function startupFcn(app)
        % Read table array from file
        t = readtable("patients.xls");
        vars = {'Age','Systolic','SelfAssessedHealthStatus','Smoker'};
        t = t(1:20,vars);
    
        % Add data to the table UI Component
        app.UITable.Data = t;
    end

    有关如何在表 UI 组件中显示表数据的详细信息,请参阅在 App 中格式化表格数据

  3. (可选)在 startupFcn 回调代码中,使用 uistyle 修改表数据的显示方式。例如,通过将以下代码添加到 StartupFcn 回调中,更改表第一列的背景颜色和字体颜色。

    s = uistyle("BackgroundColor","black","FontColor","white");
    addStyle(app.UITable,s,"column",1);
    有关详细信息,请参阅Style Cells in a Table UI Component

有关 startupFcn 回调的完全编码示例,请参阅在 App 中创建交互式表

另请参阅

函数

对象

主题