如何在Acumatica中创建Master-Detail网格？

Question

我正在开发一个自定义页面,通过以层次结构顺序显示表数据来可视化父记录和子记录之间的关系.

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

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

Answer 1

例如,如果某些BLC包含" 类别"数据视图和" 相关产品"数据视图,则应将" 类别"视图指定为主网格的数据源,将" 产品"视图指定为详细信息网格的数据源.在主网格中选择类别后,与该类别关联的所有产品都将显示在产品数据视图的详细信息网格中.

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运算符引用主视图.另外,如果主网格中没有单个记录,请注意为类别 DAC 定义的RowSelected事件处理程序,以禁用详细信息网格上的" 插入"按钮.

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

• 对于主网格将SyncPosition属性设置为true,然后按如下方式定义AutoCallBack和OnChangeCommand属性,以便每次在主网格中选择不同的记录或根本不记录任何记录时相应地刷新详细网格:

  <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>
  

• 对于细节网格,只需要定义一个刷新 CallbackCommand来强制主网格选择数据以及细节网格.通过执行框架将引发先前定义的Category_RowSelected事件处理程序并在主网格中没有记录的情况下禁用详细信息网格上的" 插入"按钮:

  <px:PXGrid ID="detailGrid" runat="server" DataSourceID="ds" SkinID="Details"
      Caption="Products" CaptionVisible="True" Width="100%">
      <CallbackCommands>
          <Refresh SelectControlsIDs="masterGrid" />
      </CallbackCommands>
      ...
  </px:PXGrid>
  

为了更好的用户体验着想,建议放置主详细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>

以下是PXGrids在Acumatica网页中应该查看和操作的主要细节: