OroCommerce 6.1：如何在订单历史数据网格中添加自定义行

针对动态生成数据网格无法直接前端操作的问题，以下是几个可行的实现方案：

方案一：数据网格构建事件监听（后端扩展） #

通过监听OroCommerce的数据网格构建事件，在网格配置中注入自定义模板，实现标题下方的内容插入：

• 创建事件监听器类，筛选目标网格（订单历史网格名称通常为order-history），为其添加自定义顶部模板配置：

  namespace Your\CustomBundle\EventListener;
  
  use Oro\Bundle\DataGridBundle\Event\BuildAfterEvent;
  
  class OrderHistoryGridListener
  {
      public function onBuildAfter(BuildAfterEvent $event): void
      {
          $gridConfig = $event->getConfig();
          if ($gridConfig->getName() !== 'order-history') {
              return;
          }
  
          // 指定自定义模板路径
          $gridConfig->offsetSet('topToolbarTemplate', '@YourCustomBundle/DataGrid/order_history_top.html.twig');
      }
  }
  

• 在services.yaml中注册监听器：

  services:
      your_custom_bundle.order_history_grid_listener:
          class: Your\CustomBundle\EventListener\OrderHistoryGridListener
          tags:
              - { name: kernel.event_listener, event: oro_datagrid.datagrid.build.after, method: onBuildAfter }
  

• 编写自定义Twig模板order_history_top.html.twig，填入需要展示的内容：

  <div class="custom-grid-top-row p-2 bg-light">
      <p>今日已处理订单：{{ processedOrderCount }} 单 | 待处理订单：{{ pendingOrderCount }} 单</p>
  </div>
  

方案二：模板继承覆盖（前端模板扩展） #

利用OroCommerce的Twig模板继承机制，直接重写订单历史网格的渲染模板：

• 在自定义Bundle的Resources/views/DataGrid目录下创建order-history.html.twig，继承原网格模板并修改对应区块：

  {% extends '@OroDataGrid/Grid/grid.html.twig' %}
  
  {% block grid_header %}
      {{ parent() }}
      <!-- 插入自定义内容 -->
      <div class="alert alert-info mt-2">
          温馨提示：超过30天的订单将自动归档，请及时处理
      </div>
  {% endblock %}
  

• 确保你的自定义Bundle在OroDataGridBundle之后加载（在bundles.php中调整顺序），让模板覆盖生效。

方案三：前端事件钩子（JS动态插入） #

借助OroCommerce基于Backbone.js的前端事件，在网格渲染完成后动态插入内容：

• 编写自定义JS模块，监听datagrid:rendered事件，定位目标网格并插入内容：

  define(['jquery'], function($) {
      'use strict';
  
      $(document).on('datagrid:rendered', function(e, grid) {
          // 确认是订单历史网格
          if (grid.name !== 'order-history') return;
  
          // 找到网格标题容器，插入自定义内容
          const headerContainer = grid.$el.find('.grid-header');
          if (headerContainer.length) {
              headerContainer.after(`
                  <div class="custom-row p-2 border-bottom">
                      <span>自定义内容：这里可以放任意HTML元素</span>
                  </div>
              `);
          }
      });
  });
  

• 将该模块注册到Oro的前端组件配置中（通过requirejs.yml或Bundle的前端配置），确保在网格加载时执行。

内容的提问来源于stack exchange，提问作者connor