如何自定义AngularJS UI-Grid树形表头模板并添加行号？

当然可以自定义AngularJS UI-Grid的树形表头模板！我来一步步教你实现，把空白单元格换成行号：

1. 明确要修改的模板 #

你要调整的是树形行表头模板（就是带+/-展开/折叠图标的那个单元格），对应的配置项是treeRowHeaderTemplate。默认模板里，图标之外的空白区域就是我们要替换的部分。

2. 编写自定义模板 #

我们需要保留原有的展开折叠交互逻辑，同时在空白区域插入行号。直接基于默认模板修改，加入你提到的行号计算逻辑：

<div ng-class="{'ui-grid-tree-header': row.treeLevel > -1, 'ui-grid-tree-header-collapsed': row.treeNode.collapsed, 'ui-grid-tree-header-expanded': !row.treeNode.collapsed}"
     ng-click="grid.api.treeBase.toggleRowTreeState(row)"
     class="ui-grid-cell-contents">
  <!-- 保留原生展开/折叠图标 -->
  <i ng-if="row.treeLevel > -1"
     ng-class="{'ui-grid-icon-minus-squared': !row.treeNode.collapsed, 'ui-grid-icon-plus-squared': row.treeNode.collapsed}"
     role="button"
     tabindex="0"
     ui-grid-one-bind-aria-label="row.treeNode.collapsed ? 'grid.tree.expandRow' : 'grid.tree.collapseRow'"></i>
  <!-- 新增行号显示，根据树形层级调整缩进 -->
  <span ng-if="row.treeLevel === -1" style="margin-left: 8px;">{{row.grid.renderContainers.body.visibleRowsCache.indexOf(row) + 1}}</span>
  <span ng-if="row.treeLevel > -1" style="margin-left: {{(row.treeLevel + 1) * 16}}px;">{{row.grid.renderContainers.body.visibleRowsCache.indexOf(row) + 1}}</span>
</div>

这里做了几个细节优化：

• 保留了原有的点击展开/折叠逻辑，确保树形功能正常工作
• 根据row.treeLevel判断节点层级，给行号添加对应缩进，保持树形结构的视觉层次
• 行号加1是因为indexOf从0开始，符合用户习惯的从1计数

3. 配置到gridOptions中 #

把上面的模板直接赋值给gridOptions的treeRowHeaderTemplate即可，用反引号包裹多行模板更方便：

$scope.gridOptions = {
  // 其他基础配置...
  enableTreeView: true,
  treeRowHeaderTemplate: `
    <div ng-class="{'ui-grid-tree-header': row.treeLevel > -1, 'ui-grid-tree-header-collapsed': row.treeNode.collapsed, 'ui-grid-tree-header-expanded': !row.treeNode.collapsed}"
         ng-click="grid.api.treeBase.toggleRowTreeState(row)"
         class="ui-grid-cell-contents">
      <i ng-if="row.treeLevel > -1"
         ng-class="{'ui-grid-icon-minus-squared': !row.treeNode.collapsed, 'ui-grid-icon-plus-squared': row.treeNode.collapsed}"
         role="button"
         tabindex="0"
         ui-grid-one-bind-aria-label="row.treeNode.collapsed ? 'grid.tree.expandRow' : 'grid.tree.collapseRow'"></i>
      <span ng-if="row.treeLevel === -1" style="margin-left: 8px;">{{row.grid.renderContainers.body.visibleRowsCache.indexOf(row) + 1}}</span>
      <span ng-if="row.treeLevel > -1" style="margin-left: {{(row.treeLevel + 1) * 16}}px;">{{row.grid.renderContainers.body.visibleRowsCache.indexOf(row) + 1}}</span>
    </div>
  `,
  // 列定义、数据源等...
};

4. 注意事项 #

• 确保已加载ui.grid.treeView模块，否则树形功能无法启用：

  angular.module('yourApp', ['ui.grid', 'ui.grid.treeView']);
  

• 如果表格有过滤、排序或分页操作，visibleRowsCache会自动更新，行号也会同步匹配当前可见行的顺序
• 你可以根据需求调整行号的样式（比如字体、颜色）或缩进像素值，适配你的UI风格

这样就能完美实现你想要的效果——把树形表头的空白单元格替换成行号，同时保留展开折叠的核心功能！

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