@wordpress/dataviews–块编辑器手册|开发人员。WordPress.org网站

DataViews包提供了两个React组件和几个实用程序来处理数据列表：

数据视图：使用不同类型的布局（表、网格、列表）和交互功能（搜索、筛选、排序等）呈现数据集。
数据表单：编辑数据集的项。

安装

安装模块

npm install@wordpress/dataviews--保存

数据视图

在WordPress Gutenberg的故事书有一个Dataviews组件的示例实现.

重要注意事项如果您尝试使用数据视图WordPress插件或主题中的组件，您正在使用@wordpress/脚本包，您需要从中导入组件@wordpress/dataviews/wp而不是@wordpress/数据视图.

用法

这个数据视图组件接收数据和一些其他配置来呈现数据集。它会调用在ChangeView上每次用户以某种方式（排序、过滤、更改布局等）与数据集交互时回调：

数据视图流

例子：

常量示例=（）=>{const onChangeView=（）=>{/*对用户更改做出反应。 */};返回(<数据视图数据=｛data｝字段={fields}view={view}onChangeView=｛onChangeView｝默认布局={defaultLayouts}actions={actions}paginationInfo={paginationInform}/>);};

的属性`布局`	表	网格	列表
`徽标字段`：字段列表`身份证件`无标签渲染并设计成徽章。		✓
`样式`：其他`宽度`,`最大宽度`,`最小宽度`,`排列`每个字段列的样式。	✓

合成模式

这个数据视图组件支持两种合成模式：

受约束的：这是默认的使用模式。数据视图呈现现成的完整布局，包括搜索、过滤器、视图切换器、布局网格或表、操作和分页。这是最简单的入门方法，只需要最少的设置。
自由成分：此模式使开发人员能够完全控制布局。您可以使用内部组件组成自己的UI，将它们准确地放置在界面中需要的位置。这对于更高级或自定义的布局很有用，同时仍然依赖相同的共享上下文进行用户交互。

组件根据儿童道具。如果没有儿童通过，数据视图呈现其内部布局（受控模式）。如果儿童提供时，组件切换到自由合成模式，完全跳过默认布局。

在这两种模式下，用户交互更新相同看法对象和共享相同的行为。自由组合组件依赖于上下文状态，并且不需要额外的道具来工作，因此无需额外的样板文件即可安全使用。

无障碍性注意事项

全部数据视图子组件的设计考虑了可访问性，包括键盘交互、焦点管理和语义角色。组件，如搜索,分页,过滤器切换、和过滤器已经在内部处理这些职责，可以安全地用于自定义布局。

当使用自由组合时，开发人员负责布局的外部结构。

开发人员不需要担心单个功能的内部可访问性逻辑。核心行为（如搜索语义、过滤器切换或分页焦点）被封装。

过滤器切换控制过滤器面板的可见性，以及过滤器呈现其中的实际过滤器。它们一起工作，应该始终作为一对使用。虽然默认情况下可以访问它们的内部行为，但它们在自定义布局中的位置和分组方式可能会影响整体体验，特别是对于辅助技术。建议格外小心。

数据表单

在WordPress Gutenberg的故事书有和DataForm组件的示例实现.

用法

常量示例=（）=>{//声明数据、字段等。返回(<数据表单data={data}字段={fields}form={form}onChange={onChange}/>);};

属性

数据：对象

要编辑的单个项目。

它可以被认为是来自数据的属性数据视图-虽然不需要。如果你的应用支持批量编辑，它可以完全分开或混合记录。

字段：对象[]

字段描述了数据的哪些部分是可见的，以及它们的行为（如何编辑、验证它们，等等）。有关每个属性的描述，请参阅“字段API”。

例子：

常量字段=[{id:'标题'，类型：'文本'，label:'标题'，},{id:'日期'，type:'日期时间'，label:'日期'，},{id:'作者'，type:'文本'label:'作者'，元素：[{value:1，标签：“管理员”}，{value:2，标签：“用户”}，],},];

表单：对象[]

类型：或者有规律的或面板.
标签位置：或者边,顶部，或没有人.
领域：应呈现的字段ID列表。字段id也可以定义为对象，并允许您定义布局,标签位置或儿童如果显示组合字段。有关每个属性的描述，请参阅“表单字段API”。

例子：

常量形式={type:'面板'，字段：['标题'，“数据”，{id:'状态'，label:'状态和可见性'，children:[“状态”，“密码”]，},{id:'功能媒体'，布局：“常规”，},],};

onChange：功能

回调函数，用于接收由用户进行编辑的对象。

例子：

常量数据={id:1，title:'标题'，author:'管理员'，日期：“2012-04-23T18:25:43.511Z”，};const onChange=（编辑）=>{/**编辑将包含用户编辑。*例如，如果用户编辑了标题*编辑将是：** {*title:'新标题'* }**/};返回(<数据表单data={data}字段={fields}form={form}onChange={onChange}/>);

公用设施

筛选排序和分页

实用程序将视图配置（筛选、搜索、排序和分页）应用于数据集客户端。

参数：

数据：数据集，如DataViews的“data”属性中所述。
看法：视图配置，如DataViews的“view”属性中所述。
领域：字段配置，如DataViews的“fields”属性中所述。

返回包含以下内容的对象：

数据：应用视图配置的新数据集。
页面信息：包含以下属性的对象：
- totalItems（总计项）：当前视图配置的项目总数。
- 总页数：当前视图配置的总页数。

isItemValid（项目有效）

实用程序用于根据当前字段和表单配置确定给定项的值是否有效。

参数：

项目：项，如DataForm的“data”属性中所述。
领域：字段配置，如DataForm的“fields”属性中所述。
形式：表单配置，如DataForm的“form”属性中所述。

返回一个布尔值，指示项是否有效（true）。

操作API

是主要的

操作是内联显示（主要）还是仅显示在“更多操作”菜单中（次要）。

类型：布尔值
可选

符合条件

确定是否可以对给定记录执行操作的函数。

类型：功能
可选。如果不存在，则认为操作适用于所有项目。
例子：

{符合条件：（item）=>item.status===“已发布”；}

回调

执行所需操作的函数。

类型：功能
要么回调或渲染模式必须提供。如果渲染模式提供，回调将被忽略
例子：

{回调：（items，{onActionPerformed}）=>{//执行操作。是否执行了操作？.（项目）；};}

渲染模式

组件以操作的模式呈现UI。

类型：反应元件
要么回调或渲染模式必须提供。如果渲染模式提供，回调将被忽略。
例子：

{RenderModal:（{items，closeModal，onActionPerformed}）=>{const onSubmit=（事件）=>{event.proventDefault（）；//执行操作。closeModal？关闭模式？.();是否执行了onAction？.（项目）；};返回(<表单onSubmit={onSubmit}><p>模式用户界面</p><H堆栈><Button variant=“terater”onClick={closeModal}>取消</按钮><按钮变量=“primary”type=“submit”>提交</按钮></H堆栈></form>);};}

隐藏模式标题

使用时控制模态标题的可见性渲染模式.

类型：布尔值
可选
如果为false，则使用渲染模式，操作的标签用于模式标头

模型大小

使用指定显示操作内容时模式窗口的大小渲染模式.

类型：一串
可选
违约：“中等”
什么之中的一个：“小”,“中等”,“大型”,“填充”

例子：

{modalSize:'large'；}

安装模块焦点

指定模式的mount属性的焦点。

类型：布尔值|一串
可选
违约：真的
什么之中的一个：真的|假|'第一元素'|'第一个内容元素'

例子：

{modalFocusOnMount:'firstContentElement'；}

字段API

身份证件

字段的唯一标识符。

类型：一串.
必修的。

例子：

{id:'字段id'；}

类型

字段类型。什么之中的一个文本,整数,日期时间.

如果字段声明类型，它获取分类,是否有效、和编辑函数（如果未指定其他值）。

类型：一串.
可选。

例子：

{type:'text'；}

获取价值

返回字段值的React组件。此值用于对字段进行排序或筛选。

类型：反应组分。
可选。
默认为项目[id].
道具：
- 项目要处理的值。
返回表示字段的值。

例子：

{getValue:（{item}）=>{/*字段的值。  */};}

提供

反应渲染场的组件。这由布局使用。

类型：反应组分。
可选。
默认为获取价值.
道具
- 项目要处理的值。
返回表示字段值的React元素。

例子：

{渲染：（{item}）=>{/*要显示的反应元素。 */};}

编辑

呈现控件以编辑字段的React组件。

类型：反应组分|一串。如果是字符串，则需要是文本,整数,日期时间,收音机,选择.
DataForm要求。如果字段提供了类型.
道具：
- 数据：要处理的项目
- 领域：字段定义
- onChange（更改时）：包含更新的回调
- 隐藏标签来自视觉：boolean表示是否应隐藏标签
返回React元素以编辑字段的值。

例子：

//由字段定义的自定义控件。{编辑：（{data，field，onChange，hideLabelFromVision}）=>{常量值=字段.getValue（{item:data}）；返回(<自定义时间选取器value={value}onChange={onChange}隐藏标签来自视觉/>);};}

//使用其中一个核心控件。{编辑：'收音机'；}

//当字段类型存在时，编辑是可选的。//该字段将使用文本的默认编辑功能。{type:'text'；}

//即使存在字段类型，也可以提供编辑。//该字段将使用其自己的自定义控件。{type:'文本'，编辑：“收音机”}

分类

函数对记录进行排序。

类型：功能.
可选。
Args公司
- 一：要比较的第一项
- b条：要比较的第二项
- 方向：要么asc公司（升序）或描述（下降）
返回一个数字，其中：
- 负值表示一应该在前面b条
- 正值表示一应该在后面b条
- 0表示一和b条被认为是平等的

例子：

//由字段定义的自定义排序函数。{排序：（a，b，方向）=>{返回方向===“asc”？a.locale比较（b）：b.localeCompare（a）；};}

//如果提供了字段类型，//该字段获得默认的排序函数。{type:“数字”；}

//即使提供了字段类型，//字段可以覆盖为该类型指定的默认排序函数。{type:“数字”；排序：（a，b，方向）=>{/*自定义排序*/};}

是否有效

函数验证字段的值。

类型：功能。
可选。
Args公司
- 项目：要验证的数据
- 上下文：包含以下道具的对象：
  - 元素：字段定义的元素
返回一个布尔值，指示字段是否有效。

例子：

//Custom isValid函数。{isValid:（item，context）=>{返回！！项目；};}

//如果字段定义了一种类型，//它将获得该类型的默认isValid函数。{type:'数字'，}

//即使字段提供类型，//该字段可以覆盖默认的isValid函数。{type:'数字'，isValid:（item，context）=>{/*自定义函数。*/}}

可见

指示字段是否应可见的函数。

类型：功能.
可选。
Args公司
- 项目：要处理的数据
返回一个布尔值指示字段是否应可见(真的)或者不是(假).

例子：

//自定义isVisible函数。{可见：（项）=>{/*自定义实现。 */};}

启用排序

布尔值，指示字段是否可排序。

类型：布尔值.
可选。
默认为真的.

例子：

{enableSorting：true；}

启用隐藏

布尔值，指示字段是否可以隐藏。

类型：布尔值.
可选。
默认为真的.

例子：

{enableHiding：true；}

启用全局搜索

布尔值，指示字段是否可搜索。

类型：布尔值.
可选。
默认为假.

例子：

{enableGlobalSearch:true；}

元素

字段的有效值列表。如果提供，它将为字段创建DataViews过滤器。DataForm的编辑控件也将使用这些值。（请参见编辑字段属性。）

类型：阵列对象的。
可选。
每个对象都可以具有以下属性：
- 价值：与字段值匹配的值。（必需）
- 标签：要显示给用户的名称。（必需）
- 描述：可选，项目的更长描述。

例子：

{元素：[{value:“1”，标签：“产品A”}，{value:“2”，标签：“产品B”}，{value:“3”，标签：“产品C”}，{value:“4”，标签：“产品D”}，];}

筛选依据

过滤器的配置。

类型：对象.
可选。
属性：
- 操作员：字段支持的运算符列表。请参阅下面的“运算符”。过滤器将支持是任意的和无默认情况下为多选择运算符。
- 是主要的：boolean，可选。指示筛选器是否为主筛选器。主过滤器始终可见，并且不会列在“添加过滤器”组件中，但列表布局除外，它的行为类似于次过滤器。

操作员：

操作员	选择	描述	例子
`是`	单个项目	`等于`。该项的字段等于单个值。	作者是管理员
`不是`	单个项目	`不等于`。该项的字段不等于单个值。	作者不是管理员
`是任意的`	多个项目	`或`。该项的字段显示在值列表中。	作者：管理员、编辑
`is无`	多个项目	`NOT或`。值列表中不存在该项的字段。	作者无：管理员、编辑
`是全部`	多个项目	`和`。该项的字段包含列表中的所有值。	类别是全部：书籍、评论、科幻小说
`不是全部`	多个项目	`NOT和`。该项的字段没有列表中的所有值。	类别并非全部：书籍、评论、科幻小说
`小于`	单个项目	`小于`。项目字段的数值小于单个值。	年龄小于18岁
`大于`	单个项目	`大于`。项目字段的数值大于单个值。	年龄大于65岁
`小于或等于`	单个项目	`小于或等于`。项目字段的数值小于或等于单个值。	年龄小于或等于18岁
`大于或等于`	单个项目	`大于或等于`。项目字段的数值大于或等于单个值。	年龄大于或等于65
`包含`	文本	`包含`。项的字段包含给定的子字符串。	标题包含：火星
`不包含`	文本	`不包含`。项的字段不包含给定的子字符串。	描述不包含：照片
`启动方式`	文本	`从开始`。项的字段以给定的子字符串开头。	标题开头为：3月
`在`	日期	`打开`。该项的字段位于给定日期（使用正确的日期分析实现日期相等）。	日期：2024-01-01
`不打开`	日期	`未打开`。该项的字段不在给定日期（使用正确的日期分析实现日期不相等）。	日期不在：2024-01-01
`之前`	日期	`之前`。项的字段早于给定日期。	日期在2024-01-01之前
`之后`	日期	`之后`。项的字段晚于给定日期。	日期在2024-01-01之后
`before公司`	日期	`之前（含）`。项的字段在给定日期之前，包括日期。	日期在2024-01-01之前，包括2024-01-01-01
`在Inc之后`	日期	`后（Inc）`。项的字段在给定日期之后，包括日期。	日期在2024-01-01之后，包括2024-01-01-01
`在过去`	日期	`过去`。该项目的字段在从现在开始的最后N个单位（天、周、月或年）内。	过去7天下的订单
`结束`	日期	`超过`。项目的字段从现在起超过N个单位（天、周、月或年）。	7天前下的订单
`之间`	多个项目	`协议双方：`。项目的字段介于两个值之间。	项目数量介于（inc）：10-180

是,不是,在,不打开,小于,大于,小于或等于,大于或等于,之前,之后,before公司,在Inc之后,包含,不包含、和启动方式是单选运算符，而是任意的,无,是全部、和不是全部是多选的。之间是一个需要两个值的特殊运算符，预设布局不支持它。未声明运算符的筛选器将支持是任意的和无默认情况下为多选择运算符。过滤器不能混合使用单选和多选运算符；如果有效操作符列表中存在单选操作符，则会丢弃多选操作符并且过滤器不允许选择多个项目。

例子：

//将过滤器设置为主过滤器。{筛选依据：{isPrimary：true；}}

//将过滤器配置为单选。{筛选依据：{运算符：[`is`，`isNot`]；}}

//使用所有选项将筛选器配置为多选。{筛选依据：{运算符：[`isAny`，`isNone`，`isAll`，`isNotAll`]；}}

表单字段API

身份证件

字段的唯一标识符。

类型：一串.
必修的。

例子：

{id:'字段id'；}

布局

与表单.类型，或者有规律的或面板仅适用于单个字段。默认为表单.类型.

类型：一串.

例子：

{id:'字段id'，布局：“常规”}

标签位置

与表单标签位置，或者边,顶部，或没有人用于单个字段。默认为表单标签位置.

类型：一串.

例子：

{id:'字段id'，labelPosition:“无”}

儿童

对子级中定义的一组字段进行分组。例如，如果要在“面板”下拉列表中显示多个字段，则可以使用子项（请参见示例）。

类型：数组<string|FormField>.

例子：

{id:'状态'，布局：'面板'，label:'组合字段'，子项：['field1'，'field2']，}

参与此包

这是古腾堡项目的一部分。该项目被组织为单回购项目。它由多个独立的软件包组成，每个包都有特定的用途。此monorepo中的包发布到净现值并由使用WordPress（文字出版社）以及其他软件项目。

要了解更多关于对这个包或古腾堡整体贡献的信息，请阅读该项目的主要内容贡献者指南.

@wordpress/数据视图

在本文中