文档

DataGrid

更新时间:

简介

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

image.png

属性配置

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

类别

说明

样式

可以在样式配置区域调节DataGrid的基本展现样式,详细说明请参见样式

数据

绑定类型的可选值有上下文实体逻辑流三种类型,详细说明请参见数据

表格设置

设置列表、操作列、多选等操作,详细说明请参见表格设置

搜索设置

设置搜索样式,详细说明请参见搜索设置

分页设置

设置分页样式,详细说明请参见分页设置

条件可见性

决定组件是否在应用的页面中展示给最终用户。详细说明请参见条件可见性

样式

image

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

属性

说明

展示行数

用于控制组件每页显示的最大行数,默认为6行。

宽度

有百分比、像素值两种模式,用于控制整个组件的宽度。

间距

包括内间距和外间距,单位为像素,用于控制整个组件的内、外间距。

表格设置

表格设置参数内容如下:

image.png
  • 展示列表

    配置需要展示的字段类型字段名显示表名列宽排序能力的开关是否开启、是否可编辑展示字段包括数据自身字段与该数据所对应关联对象的字段。展示列表配置示例如下图所示:

    image

    其中ID字段设置了具体列宽,其余字段平均分配剩余空间。且ID字段的排序能力设置为开启,因此可以通过点击ID右侧的图标对数据进行ID升序ID降序的方式展示。预览效果如下图所示:

    image

  • 显示操作列取消

    image.png

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

    属性

    说明

    示例

    显示文案

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

    -

    触发事件

    请参见下表。

    -

    条件显隐

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

    image.pngimage.png

    触发事件参数说明:

    操作类型

    子类型

    说明

    删除数据

    删除数据

    内存级别删除该行数据。

    删除数据并提交

    内存级别删除该行数据,并同步数据库。

    编辑数据

    -

    开启该行数据的可编辑态。

    撤销数据

    -

    撤销该行已编辑数据。

    保存数据

    保存数据并提交

    保存已编辑数据,并同步数据库。

    保存数据

    保存已编辑数据。

    自定义操作

    -

    详见事件

  • 多选能力

    imageimage

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

    属性

    说明

    显示文案

    该操作在DataGrid多选区中显示的字样。

    触发事件

    请参见下表。

    主题风格

    该操作在DataGrid多选区中显示的按钮样式。

    触发事件参数说明:

    操作类型

    子类型

    说明

    删除数据

    删除数据

    内存级别删除该行数据。

    删除数据并提交

    内存级别删除该行数据,并同步数据库。

    编辑数据

    -

    开启该行数据的可编辑态。

    撤销数据

    -

    撤销该行已编辑数据。

    保存数据

    保存数据并提交

    保存已编辑数据,并同步数据库。

    保存数据

    保存已编辑数据。

    添加数据

    -

    新增加一行可编辑的数据

    选择数据

    -

    选择器组件专用操作,用于选择关联对象

    自定义操作

    -

    详见事件

搜索设置

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

image.png

属性

说明

显示搜索区

开启或关闭,控制是否展示组件上方搜索区。

搜索区按钮居右

当搜索区操作配置存在时,开启后,搜索区操作按钮将紧靠页面右侧。

标签排列方式

控制标签与搜索输入框的相对位置,分为垂直与水平两种方式。

搜索区配置

配置可用于搜索的字段,其中CHAR类型字段可以通过逻辑流展示可选项,逻辑流需返回可供选择的字符类型列表。

搜索操作配置

配置可点击的按钮,如搜索、重置。

分页设置

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

image.png

属性

说明

显示分页

开启或关闭,控制是否展示分页区域。

展示形式

配置分页器样式,可配置简单分页器、标准分页器或者迷你分页器。

尺寸

配置分页器大小,可配置小、中、大三种尺寸。

箭头形式

配置分页器箭头的形式,可配置标准箭头或无边框箭头。

在仅有一页时隐藏分页

配置是否在仅有一页时隐藏分页。

显示总数

配置是否显示总数。

自定义逻辑流分页

配置是否应用自定义逻辑流分页能力。

对齐方式

配置分页器相对DataGrid的对齐方式,可配置左、中、右三种属性。

  • 本页导读
文档反馈