@wordpress/数据视图

DataViews是一个组件，它提供了一个API来使用不同类型的布局（表、网格、列表等）呈现数据集。

DataViews是数据无关的，它可以处理来自静态（JSON文件）或动态源（HTTP请求）的数据-它只需要数据是具有唯一标识符的对象数组。消费者有责任根据DataViews道具适当查询数据源：

安装

安装模块

npm install@wordpress/dataviews--保存

用法

常量示例=（）=>{//声明数据、字段等。返回(<数据视图data={data}fields=｛fields｝view={view}onChangeView={onChangeView}默认布局={defaultLayouts}actions={actions}paginationInfo={paginationInform}/>);};

属性

数据：对象[]

要使用的数据集，表示为一维数组。

例子：

常量数据=[{id:1，title:'标题'，author:'管理员'，日期：“2012-04-23T18:25:43.511Z”，},{/* ... */},];

默认情况下，数据视图将使用每个记录的身份证件作为唯一标识符。如果不是，消费者应该提供获取项目ID返回一的函数。

字段：对象[]

字段描述数据集中每个记录的可见项。

例子：

常量状态=[{value:“草稿”，标签：__（“草稿”）}，{value:“未来”，标签：__（“计划”）}，{value:“待定”，标签：__（“待定审核”）}，{value:“私有”，标签：__（“私有”）}，{value:'发布'，标签：__（'发布'）}，{value:“垃圾”，标签：__（“垃圾”）}，];常量字段=[{id:'标题'，label:'标题'，启用隐藏：false，},{id:'日期'，label:'日期'，渲染：（{item}）=>{return<time>{getFormattedDate（item.date）}</time>；},},{id:'作者'，标签：__（“作者”），渲染：（{item}）=>{return<a href=“…”>{item.author}</a>；},元素：[{value:1，标签：“管理员”}，{value:2，标签：“用户”}，],筛选依据：{运算符：['is'，'isNot']，},enableSorting:false，},{标签：__（'状态'），id：“状态”，getValue:（{item}）=>STATUSES.find（（{value}）=>value===项状态）？。标签？？项目状态，元素：状态，筛选依据：{运算符：['isAny']，},enableSorting:false，},];

每个字段都是具有以下属性的对象：

• 身份证件：字段的标识符。独一无二。
• 标签：要在UI中显示的字段名称。
• 获取价值：返回字段值的函数，默认为字段[id].
• 提供：呈现字段的函数。可选，获取价值将在以下情况下使用提供未定义。
• 元素：将字段用作筛选器或编辑时要从中选择的选项列表（DataForm组件）。它需要具有以下属性的对象数组：
  • 价值：要筛选到的值的id（供内部使用）
  • 标签：将在项目的UI中显示的文本。
  • 描述：描述要显示的元素的较长描述。可选。

  要通过字段启用过滤器，只需将适当的值设置为元素要筛选的字段的属性。

• 类型：字段的类型。参见“字段类型”。

• 启用排序：数据是否可以按给定字段排序。默认情况下为True。
• 启用隐藏：字段是否可以隐藏。默认情况下为True。
• 启用全局搜索：字段是否可搜索。默认情况下为False。
• 筛选依据：由启用的筛选器的配置元素属性。
  • 操作员：的列表操作员由字段支持。
  • 是主要的：是否为粗滤器。主过滤器始终可见，并且不会列在“添加过滤器”组件中，但列表布局除外，它的行为类似于次过滤器。

视图：对象

视图对象配置数据集对用户的可见方式。

例子：

常量视图={type:'表'，搜索：“”，过滤器：[{字段：“author”，运算符：“is”，值：2}，{字段：“status”，运算符：“isAny”，值：[“publish”，“draft”]}，],页码：第1页，每页：5，排序：{field:'日期'，方向：'desc'，},字段：['author'，'status']，布局：｛｝，};

属性：

• 类型：视图类型，其中之一桌子,网格,列表参见“布局类型”。
• 搜索：应用于数据集的文本搜索。
• 过滤器：应用于数据集的筛选器。每个项目描述：
  • 领域：此筛选器绑定到的字段。
  • 操作人员：它是哪种类型的过滤器。请参阅“运算符类型”。
  • 价值：用户选择的实际值。
• 每页：每页显示的记录数。
• 第页：可见的页面。
• 分类:
  • 领域：用于对数据集进行排序的字段。
  • 方向：用于排序的方向，其中之一asc公司或描述.
• 领域：的身份证件在UI中可见的字段及其显示的特定顺序。

• 布局特定于特定布局类型的：config。

的属性布局

的属性布局	表	网格	列表
primary字段：字段的身份证件在每个布局中突出显示。它是不可隐藏的。	✓	✓	✓
媒体字段：字段的身份证件用于渲染每张卡的媒体。它不可隐藏。		✓	✓
列字段：字段列表身份证件以垂直堆叠而不是水平渲染（默认设置）。		✓
徽标字段：字段列表身份证件无标签渲染并设计成徽章。		✓
组合字段：通过组合其他字段而生成的“虚拟”字段列表。请参阅“组合字段”部分。	✓
样式：其他宽度,最大宽度,最小宽度每个字段列的样式。	✓

onChangeView:函数

视图是数据集可见状态的表示：用于显示数据集的布局类型（表、网格等）、数据集的过滤方式、排序或分页方式。

消费者有责任与数据提供者合作，确保通过视图的配置（排序、分页、过滤器等）定义的用户选项得到尊重。这个在ChangeView上prop允许使用者提供一个回调，以便在视图配置更改时调用，从而相应地处理数据。

下面的示例显示了如何使用视图对象通过实体抽象查询WordPress REST API。对于任何其他数据提供程序也可以这样做。

函数MyCustomPageTable（）{const[view，setView]=使用状态（{type:'表'，每页：5，页码：第1页，排序：{field:'日期'，方向：'desc'，},搜索：“”，过滤器：[{字段：“author”，运算符：“is”，值：2}，{field:'状态'，运算符：“isAny”，值：[“发布”，“草稿”]，},],字段：['author'，'status']，布局：{}，} );const queryArgs=useMemo（（）=>{常量过滤器={}；view.filters.forEach（（filter）=>{if（filter.field===“状态”&&filter.operator===”isAny“）{filters.status=过滤器值；}if（filter.field===“作者”&&filter.operator===”is“）{filters.author=过滤器值；}} );返回{per_page:查看.perPage，页码：view.page，_嵌入：'作者'，顺序：查看。排序？。方向，orderby：查看。排序？。字段，搜索：视图。搜索，…过滤器，};}，[视图]）；const{records}=useEntityRecords（'postType'，'page'，queryArgs）；返回(<数据视图数据={记录}视图=｛视图｝onChangeView={setView}// .../>);}

操作：对象[]

可以对每条记录执行的操作的集合。

每个动作都是具有以下属性的对象：

• 身份证件：字符串，必需。操作的唯一标识符。例如，移动到垃圾箱.
• 标签：string | function，必需。面向用户的操作描述。例如，移动到回收站。如果我们想根据所选项目调整标签，可以提供一个接受所选记录作为输入的函数。此函数应始终返回一串值。
• 是主要的：boolean，可选。操作是内联列出（主要）还是隐藏在更多操作菜单中（次要）。
• 偶像：图标以显示主要操作。它是主要操作所必需的，否则该操作将被视为次要操作。
• 符合条件：功能，可选。是否可以对给定记录执行操作。如果不存在，则认为该操作适用于所有项目。它将给定的记录作为输入。
• 具有破坏性：boolean，可选。操作是否可以删除数据，在这种情况下，UI将通过红色进行通信。
• 回调：功能，除非渲染模式提供了。回调函数，将记录作为输入并执行所需操作。
• 渲染模式：ReactElement，可选。如果一个操作需要在模式中呈现某些UI，它可以提供一个组件，该组件将记录作为项目和acloseModal（关闭模式）功能。当提供此道具时回调属性被忽略。
• 隐藏模式标题：boolean，可选。此属性与渲染模式并且控制模态的报头的可见性。如果操作呈现了一个模态，并且没有隐藏头部，那么该操作的标签将用于模态的头部。
• 支持批量：操作是否可以用作批量操作。默认为False。
• 禁用：操作是否已禁用。默认情况下为False。

paginationInfo:对象

• totalItems（总计项）：数据集中的项目总数。
• 总页数：总页数，考虑数据集中的总项目数和用户提供的每页项目数。

搜索：布尔

是否启用搜索输入。真的默认情况下。

searchLabel:字符串

要在搜索输入中显示的文本。默认情况下为“搜索”。

getItemId：函数

函数，该函数接收项并返回其唯一标识符。默认情况下，它使用身份证件作为唯一标识符。如果不是，消费者应该提供他们自己的。

isLoading:布尔值

数据是否正在加载。假默认情况下。

默认布局：记录<字符串，视图>

此属性提供有关活动视图类型的布局信息。如果为空，则使用空布局数据启用所有布局类型（请参阅“布局类型”）。

例如，这是您仅启用表视图类型的方式：

const defaultLayouts={表：{布局：{primaryField:“my-key”，},},};

这个默认布局属性应该是包含名为桌子,网格，或列表。每个属性都应包含布局属性，它保存每个特定布局类型的配置。检查在这里每个布局配置可用属性的完整列表

onChangeSelection:函数

回调，向用户发送信号，指示用户选择了多个项目中的一个，并将其作为参数。到目前为止，只有列表视图实现了它。

类型

布局

• 桌子：视图使用表格布局。
• 网格：视图使用网格布局。
• 列表：视图使用列表布局。

领域

这个枚举类型被删除，因为它被认为与field.elements元数据冗余。新类型即将推出。

组合字段

这个桌子layout能够创建通过合并现有字段而生成的“虚拟”字段。

每个“虚拟字段”都必须提供身份证件和标签（可选a收割台相反），其含义与任何其他字段相同。

此外，他们需要提供：

• 儿童：字段列表身份证件合并
• 方向：应如何堆叠，垂直的或水平的

例如，以下是定义网站字段，它是标题和描述字段，不显示：

{字段：[“站点”，“状态”]，布局：{组合字段：[{id:'站点'，label:'站点'，children:['title'，'description']，方向：'垂直'，}]}}

操作员

允许的操作员：

操作员	选择	描述	例子
是	单个项目	等于。该项的字段等于单个值。	作者是管理员
不是	单个项目	不等于。该项的字段不等于单个值。	作者不是管理员
是任意的	多个项目	或。该项的字段显示在值列表中。	作者：管理员、编辑
is无	多个项目	NOT或。值列表中不存在该项的字段。	作者无：管理员、编辑
是全部	多个项目	和。该项的字段包含列表中的所有值。	类别是全部：书籍、评论、科幻小说
不是全部	多个项目	NOT和。该项的字段没有列表中的所有值。	类别并非全部：书籍、评论、科幻小说

是和不是是单选运算符，而是任意的,无,是全部，以及是NotALl是多选的。默认情况下，未声明运算符的筛选器将支持是任意的和无多选择运算符。过滤器不能混合使用单选和多选运算符；如果有效操作符列表中存在单选操作符，则会丢弃多选操作符并且过滤器不允许选择多个项目。

传统运营商在里面和不输入已弃用，将很快删除。与此同时，他们作为是和不是操作符。

参与此包

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

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