Main Content

在 App 中创建交互式表

打开 App

表适用于存储和显示表格数据。此示例说明如何使用表 UI 组件在 App 中显示数据。您还可以配置该表，以便 App 用户可以通过排序或编辑数据来与之交互。

App 概述

当 App 启动时，它会将患者数据的电子表格加载到一个表数组中。然后显示并绘制该表数组中的部分数据。当 App 用户在运行时编辑表 UI 组件中的值或对其中的列排序时，其中一个图会更新。该 App 提供原始数据的绘图以供比较。

使用表创建 App

在一个表 UI 组件中显示患者数据，并启用其交互式功能：

  1. 在设计视图中向 App 画布添加一个表，并在组件浏览器中配置该表。重命名这四个表列，并指定当用户与表 UI 组件交互时这些列是否可以编辑和排序。有关在 App 设计工具中使用表和配置表行为的详细信息，请参阅Add Tables to App Designer Apps。

  2. 在 startupFcn 回调函数中以编程方式填充表 UI 组件。通过在组件浏览器中右键点击 App 节点并选择回调 > 添加 StartupFcn 回调，以创建 startupFcn 回调。首先，从电子表格中加载患者数据，然后使用 Data 属性以编程方式将此表格数据分配给表 UI 组件。有关在表 UI 组件中显示表数据的详细信息，请参阅在 App 中格式化表格数据。

function startupFcn(app)
    % Read table array from file
    t = readtable("patients.xls");
    % Configure table appearance
    % ...
    % Add data to the table UI component
    app.UITable.Data = t;
end

在添加和配置表 UI 组件后，对 App 进行编程，以便 App 用户修改表数据时更新绘图。在名为 updatePlot 的辅助函数中，添加代码以获取当前表数据并绘制修改后的数据。然后创建一个名为 UITableDisplayDataChanged 的回调函数，以便在 App 用户使用 updatePlot 辅助函数更改表数据时更新绘图。有关回调的详细信息，请参阅 App 设计工具中的回调。

function UITableDisplayDataChanged(app,event)
    % Update the plots when user sorts the columns of the table
    updatePlot(app);
end

要查看和浏览完全编码的 App，请在 App 设计工具中启动此示例。运行该 App 并编辑一些表字段，查看 Updated Data 绘图中的变化。

另请参阅

函数

属性

相关主题