Power Apps Excel风格可编辑表格 – 第2部分

大家好，我是阿波，一个不会描述只会给详细实现方式的创作者。每天进步一点点，关注我的微信公众号【创界Power工坊】，获取更多Power Apps开发技术知识！

这是一个教程系列，你将学习如何在 Power Apps 中构建类似 Excel 的可编辑表格。在第一部分中，我们学习了如何在表格中显示数据，修改内容，并将更改保存回数据源。现在我们将构建一个数据录入表，用于添加新记录，并学习如何删除任何不需要的记录。

如果你还没读过第一部分，我强烈建议你先读第一部分。或者如果你已经读过，准备好迎接接下来的内容，这就是第二部分。

库存盘点应用继续

库存盘点应用被家居建材店员工用来记录该企业拥有的每件产品的实际数量。当数据源中没有现有产品时，员工会为产品添加新记录。如果某产品不再在商店销售，员工可以完全删除该记录。

新增记录

要添加新记录，员工点击新记录图标，数据录入表会出现。

在屏幕上放置一个“添加”图标（ico_New）和带有“新”字样的标签（lbl_New）。然后在图标和标签的OnSelect属性中写入这段代码。它会在集合 colUpdates 中创建两个空白记录，编号为 1 和 2，并将可编辑表改为新模式。

ClearCollect(colUpdates, {ID:1},{ID:2});Set(varGalleryMode, "New");Code language:CSS(css)

在画廊的Items属性中使用这个代码，让它在新模式下显示colUpdates的记录。

If(varGalleryMode="New", colUpdates,'Inventory Count')Code language:JavaScript(javascript)

允许员工通过将DisplayMode属性改写为该代码，在文本输入中写入txt_ItemNumber、txt_Description、txt_Quantity和txt_Location。现在点击图标时，表格会切换到新模式。

If(varGalleryModein["New", "Edit"], DisplayMode.Edit,DisplayMode.View)Code language:CSS(css)

接下来，我们希望员工能够根据自己的意愿添加尽可能多的新物品。当在表格最后一行的文本输入中输入一个值时，另一行会直接出现在其下方。

要添加此功能，请将以下代码放入所有4个文本输入的OnChange属性中：txt_ItemNumber、txt_Description、txt_Quantity和txt_Location。

With(    {wLastID: Last(colUpdates).ID},    If(varGalleryMode="New" And ThisItem.ID=wLastID, Collect(colUpdates, {ID: wLastID+1})));Code language:JavaScript(javascript)

保存与取消新唱片

员工输入完数据后，可以点击“保存”图标，一次性将所有新记录写回数据源。或者他们可以点击“取消”按钮，根本不保存任何内容。

为此，我们将重新使用教程第一部分中的保存图标（ico_Save）、取消图标（ico_Cancel）及其旁边的标签（lbl_Save、lbl_Cancel）。

把保存/取消图标和标签的可见属性里的代码改成这个。

varGalleryModein["New", "Edit"]Code language:CSS(css)

当画廊处于新模式和编辑模式时，保存图标的行为是不同的。在OnSelect属性中，创建一个IF语句，如下面的代码块所示。同样，它会包含之前为编辑模式编写的所有代码。

// Create a collection to store updated valuesIf(// Do this when new entries are being created    varGalleryMode="New",// Load all new entries into the collection colUpdates    ForAll(        gal_EditableTable.AllItems As NewRows,        Patch(colUpdates,        LookUp(colUpdates, ID=NewRows.ID), {            ItemNumber: NewRows.txt_ItemNumber.Text,            Description: NewRows.txt_Description.Text,            Quantity: Value(NewRows.txt_Quantity.Text),            Location: NewRows.txt_Location.Text        })    );// Clear any ID numbers from colUpdates and delete the last row which holds no info     UpdateIf(colUpdates, true, {ID: Blank()});    Remove(colUpdates, Last(colUpdates)),// Do this when entries are being edited    varGalleryMode="Edit",// Load changed entries into the collection colUpdates    ForAll(        Filter(                gal_EditableTable.AllItems,                tog_isChanged.Value        ) As ChangedRows,        Patch(colUpdates,        Defaults(colUpdates), {            ID: ChangedRows.ID,            ItemNumber: ChangedRows.txt_ItemNumber.Text,            Description: ChangedRows.txt_Description.Text,            Quantity: Value(ChangedRows.txt_Quantity.Text),            Location: ChangedRows.txt_Location.Text        })    ));// Update SharePoint with new values or changed values for existing rowsPatch('Inventory Count', colUpdates);Clear(colUpdates);// Return gallery to view modeSet(varGalleryMode, Blank());Code language:PHP(php)

点击保存按钮现在会将新记录插入数据源。

取消图标在其OnSelect属性中不需要额外代码。我们可以依赖已有的代码。

// Reset text inputs to erase any edits madeSet(varResetTextInputs, true); Set(varResetTextInputs, false);// Clear any changes from colUpdatesClear(colUpdates);// Return gallery to view modeSet(varGalleryMode, Blank());Code language:JavaScript(javascript)

就像编辑模式一样，点击取消时，记录不会被保存。

删除记录

如果公司不再供应某产品或发生数据录入错误，员工可以删除该产品。在屏幕上放置一个垃圾桶图标（ico_Delete），并在其旁边（lbl_Delete）放置标签

把这个代码放进删除图标的OnSelect属性，然后点击将表切换到删除模式。

Set(varGalleryMode, "Delete");Set(varIsDeleteMode, true);Code language:JavaScript(javascript)

员工将通过点击旁边的垃圾桶图标选择要删除的记录。在画廊（ico_DeleteLine）中放置一个垃圾图标，如下图所示。

当记录被选中删除时，它会以红色高亮显示。垃圾桶图标会变成取消图标，员工可以在需要时取消该记录。

在 ico_DeleteLine 的 OnSelect 属性中使用该代码选择该记录并将其添加到待删除的集合 colDeleteRecords 中。

If(Self.Icon=Icon.Trash, Collect(colDeleteRecords, ThisItem), Remove(colDeleteRecords, ThisItem));If(CountRows(colDeleteRecords)>0 Or varGalleryMode="Delete", Set(varIsDeleteMode, true), Set(varIsDeleteMode, false));Code language:JavaScript(javascript)

这段代码放在ico_DeleteLine的图标属性中，控制显示废弃或取消图标。

If(ThisItemincolDeleteRecords, Icon.Cancel, Icon.Trash)Code language:CSS(css)

将此代码输入ico_DeleteLine的可见属性，使表单在编辑模式时显示。还包含了额外代码，允许在新模式和编辑模式下删除。

varGalleryMode in ["Delete","Edit"] Or (varGalleryMode="New" And ThisItem.ID<Max(colUpdates,ID) And CountRows(colUpdates)>1)Code language:JavaScript(javascript)

一旦选择删除记录，员工可以点击确认图标删除记录，点击取消图标返回退出删除模式。在屏幕上放置一个检查图标（ico_ConfirmDelete）、取消图标（ico_CancelDelete）以及标签。

ico_ConfirmDelete和ico_CancelDelete应该只在画廊处于删除模式时才会出现。在 Visible 属性中使用这段代码。

varIsDeleteMode

点击ico_ConfirmDelete后，所有选中的记录都会被删除，画廊会恢复到查看模式。把这个代码放到它的OnSelect属性里

// Delete records from datasource or collection depending on modeIf(    varGalleryMode in ["Delete", "Edit"],    Remove('Inventory Count', colDeleteRecords),    Remove(colUpdates, colDeleteRecords));Clear(colDeleteRecords);Set(varIsDeleteMode, false);If(varGalleryMode="Delete", Set(varGalleryMode, Blank()));Code language:JavaScript(javascript)

试着删除几条记录。结果应该是这样的。

最后，在ico_CancelDelete的OnSelect属性中使用该代码。

Clear(colDeleteRecords);Set(varIsDeleteMode, false);If(varGalleryMode="Delete", Set(varGalleryMode, Blank()));Code language:JavaScript(javascript)

取消记录删除会将表格恢复为查看模式。

在新模式或编辑模式下删除记录

为了方便使用，员工还应能在新模式和编辑模式下删除记录，同时还能删除。需要额外写一行代码才能让这个功能正常工作。将ico_Save、lbl_Save、ico_Cancel和lbl_Cancel的可见属性改为以下代码。

varGalleryModein["New", "Edit"]And !varIsDeleteModeCode language:CSS(css)

在新模式或编辑模式下删除记录的方式如下图所示。

我们的 Power Apps Excel 风格可编辑表格现已完成。员工有权添加、编辑和删除记录。

以上就是本次的全部内容，如果对你有帮助，如未实现如图所示效果，可留言；麻烦点一点 在看+点赞+分享，你的支持就是作者更新最大的动力！

                     你喜欢这篇文章吗？转发在看就是最大的支持❤️