如何在 Acumatica 中创建主从网格？

Question

我正在开发一个自定义页面，通过按层级顺序显示 table 数据来可视化父记录和子记录之间的关系。

我的 BLC 中有 2 个数据视图，我想将其用作两个 PXGrids 的数据源，以 master/detail 格式显示数据.当在主网格中选择一条记录时，所有相关的子条目都应显示在详细信息网格中。

我应该如何在 Aspx 中声明我的 2 PXGrids 来完成这个任务？

Answer 1

例如，如果某些 BLC 包含类别数据视图和 相关产品 数据视图，您将指定 Categories 视图作为主网格的数据源，Products 视图作为详细信息网格的数据源。在主网格中 select 编辑类别时，与该类别关联的所有产品都将显示在产品数据视图的详细信息网格中。

public class ProductCategories : PXGraph<ProductCategories>
{
    #region Actions
    public PXSave<Category> Save;
    public PXCancel<Category> Cancel;
    #endregion

    #region Data Members
    public PXSelect<Category> Categories;

    public PXSelect<CategoryProduct,
        Where<CategoryProduct.categoryID, 
            Equal<Current<Category.categoryID>>>> CategoryProducts;
    #endregion

    #region Event Handlers
    protected virtual void Category_RowSelected(PXCache sender, PXRowSelectedEventArgs e)
    {
        this.CategoryProducts.Cache.AllowInsert = e.Row != null;
    }
    #endregion
}

如上面的代码片段所示，详细视图通过 Current BQL 运算符引用主视图。此外，请注意为 Category DAC 定义的 RowSelected 事件处理程序禁用详细信息网格上的 Insert 按钮，如果主网格中没有一条记录。

下一步是在Aspx中配置master-detail PXGrids:

主格设置SyncPosition属性到true，然后如下定义 AutoCallBack 和 OnChangeCommand 属性，以便在每次有不同的记录或根本没有记录时相应地刷新详细信息网格在主网格中被 select 编辑：

<px:PXGrid ID="masterGrid" runat="server" DataSourceID="ds" SkinID="Details"
    SyncPosition="True" Caption="Categories" CaptionVisible="True" Width="100%">
    <AutoCallBack Command="Refresh" Target="detailGrid" />
    <OnChangeCommand Command="Refresh" Target="detailGrid" />
    ...
</px:PXGrid>

对于细节网格，只需要定义一个刷新回调命令来强制主网格与细节网格一起select数据。通过这样做，框架将引发先前定义的 Category_RowSelected 事件处理程序，并在没有的情况下禁用详细信息网格上的 Insert 按钮在主格中记录：
```
<px:PXGrid ID="detailGrid" runat="server" DataSourceID="ds" SkinID="Details"
    Caption="Products" CaptionVisible="True" Width="100%">
    <CallbackCommands>
        <Refresh SelectControlsIDs="masterGrid" />
    </CallbackCommands>
    ...
</px:PXGrid>
```

为了更好的用户体验，建议将master-detail PXGrids放在PXSplitContainer中，如图下面的代码片段：

<px:PXSplitContainer runat="server" ID="sp" PositionInPercent="true" SplitterPosition="50"
    SkinID="Horizontal" Orientation="Horizontal" Panel1MinSize="250" Panel2MinSize="250">
    <AutoSize Enabled="true" Container="Window" />
    <Template1>
        <px:PXGrid ID="masterGrid" runat="server" DataSourceID="ds" SkinID="Details"
            SyncPosition="True" Caption="Categories" CaptionVisible="True" Width="100%">
            <AutoCallBack Command="Refresh" Target="detailGrid" />
            <OnChangeCommand Command="Refresh" Target="detailGrid" />
            <Levels>
                <px:PXGridLevel DataMember="Categories">
                    <Columns>
                        ...
                    </Columns>
                </px:PXGridLevel>
            </Levels>
            <AutoSize Enabled="True" />
        </px:PXGrid>
    </Template1>
    <Template2>
        <px:PXGrid ID="detailGrid" runat="server" DataSourceID="ds" SkinID="Details"
            Caption="Products" CaptionVisible="True" Width="100%">
            <CallbackCommands>
                <Refresh SelectControlsIDs="masterGrid" />
            </CallbackCommands>
            <Levels>
                <px:PXGridLevel DataMember="CategoryProducts">
                    <Columns>
                        ...
                    </Columns>
                </px:PXGridLevel>
            </Levels>
            <AutoSize Enabled="True" />
        </px:PXGrid>
    </Template2>
</px:PXSplitContainer>

下面是 master-details PXGrids 在 Acumatica 网页中的外观和操作方式：

如何在 Acumatica 中创建主从网格？

How to create Master-Detail Grids in Acumatica?

acumatica

acumatica-kb