什么是DataGrid,如何使用_多端低代码开发平台魔笔(Mobi)-阿里云帮助中心

简介

DataGrid以表格的形式显示一组对象实体列表。通过DataGrid自身集成的丰富功能，可以对这组对象实体进行查看、搜索和编辑等操作。例如，可以通过DataGrid展示一组学生的姓名、性别、年龄等信息。

DataGrid组件属性由以下部分组成：

类别	说明
样式	可以在样式配置区域调节DataGrid的基本展现样式，详细说明请参见样式。
数据	绑定类型的可选值有上下文、实体和逻辑流三种类型，详细说明请参见数据。
表格设置	设置列表、操作列、多选等操作，详细说明请参见表格设置。
搜索设置	设置搜索样式，详细说明请参见搜索设置。
分页设置	设置分页样式，详细说明请参见分页设置。
条件可见性	决定组件是否在应用的页面中展示给最终用户。详细说明请参见条件可见性。

您可以在样式配置区域调节DataGrid的基本展现样式。具体可调节的展现属性如下表所示，DataGrid可以订制展示行数、宽度和间距。

属性	说明
展示行数	用于控制组件每页显示的最大行数，默认为6行。
宽度	有百分比、像素值两种模式，用于控制整个组件的宽度。
间距	包括内间距和外间距，单位为像素，用于控制整个组件的内、外间距。

表格设置参数内容如下：

展示列表
配置需要展示的字段类型、字段名、显示表名、列宽、排序能力的开关是否开启、是否可编辑。展示字段包括数据自身字段与该数据所对应关联对象的字段。展示列表配置示例如下图所示：
其中ID字段设置了具体列宽，其余字段平均分配剩余空间。且ID字段的排序能力设置为开启，因此可以通过点击ID右侧的图标对数据进行ID升序、ID降序的方式展示。预览效果如下图所示：

开启显示操作列的开关后，DataGrid会在右侧生成一个操作列，可以在操作列中配置各种操作。对于每一个操作，可以配置其显示文案、触发事件等。

属性

说明

示例

显示文案

该操作在DataGrid操作列中显示的字样。

触发事件

请参见下表。

条件显隐

编写表达式，根据当前行数据判断是否展示此操作。如根据当前行数据的布尔字段是否为true决定是否显示“删除”操作。

触发事件参数说明：

开启多选能力的开关后，DataGrid中会支持开启多项选择能力，可以选中多行数据来触发多选区的操作

触发事件参数说明：

搜索设置参数如下图所示：

属性	说明
显示搜索区	开启或关闭，控制是否展示组件上方搜索区。
搜索区按钮居右	当搜索区操作配置存在时，开启后，搜索区操作按钮将紧靠页面右侧。
标签排列方式	控制标签与搜索输入框的相对位置，分为垂直与水平两种方式。
搜索区配置	配置可用于搜索的字段，其中CHAR类型字段可以通过逻辑流展示可选项，逻辑流需返回可供选择的字符类型列表。
搜索操作配置	配置可点击的按钮，如搜索、重置。

分页设置参数如下图所示：

属性	说明
显示分页	开启或关闭，控制是否展示分页区域。
展示形式	配置分页器样式，可配置简单分页器、标准分页器或者迷你分页器。
尺寸	配置分页器大小，可配置小、中、大三种尺寸。
箭头形式	配置分页器箭头的形式，可配置标准箭头或无边框箭头。
在仅有一页时隐藏分页	配置是否在仅有一页时隐藏分页。
显示总数	配置是否显示总数。
自定义逻辑流分页	配置是否应用自定义逻辑流分页能力。
对齐方式	配置分页器相对DataGrid的对齐方式，可配置左、中、右三种属性。