Question

可以自定义树基本标题的模板（当分组处于活动状态时，包含＆＃34; +＆＃34;和＆＃34; - ＆＃34;图标的列）？

我想修改空白单元格的内容并在其中显示一个行号（{{row.grid.renderContainers.body.visibleRowsCache.indexOf（row）}}）...

我找到了我需要修改的模板内容：

<i ng-class="
   { 'ui-grid-icon-minus-squared': 
       ( 
           (grid.options.showTreeExpandNoChildren && row.treeLevel > -1)
           || (row.treeNode.children && row.treeNode.children.length > 0)
       ) && row.treeNode.state === 'expanded', 
     'ui-grid-icon-plus-squared': 
       ( 
          (grid.options.showTreeExpandNoChildren && row.treeLevel > -1) 
          || ( row.treeNode.children && row.treeNode.children.length > 0)  
       ) 
     && row.treeNode.state === 'collapsed'
   }" 

   ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}"
   class="ui-grid-icon-minus-squared" style="padding-left: 10px;">
</i>

...但我不知道如何更改它并将我的修改存储在gridOption中

Answer 1

是的，有可能。我需要同样的东西。在搜索时我找到了this个帖子。这提到您可以通过提供templateCache来覆盖模板。（我使用了接受的方法（使用脚本标记）。）为此我只需要我想覆盖的模板的引用，所以“ui-grid / treeBaseRowHeaderButtons”。对于我的情况，我在图标前插入了行计数。我放在我视图中的代码是html：

<script id="ui-grid/treeBaseRowHeaderButtons" type="text/ng-template">
    <div class="ui-grid-tree-base-row-header-buttons" ng-class="{'ui-grid-tree-base-header': row.treeLevel > -1 }" ng-click="treeButtonClick(row, $event)">
        <span class="countNumber">{{ row.entity.count }}</span>
        <i ng-class="{'ui-grid-icon-minus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel> -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'expanded', 'ui-grid-icon-plus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'collapsed'}"
           ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}">
        </i> &nbsp;
    </div>
</script>

自定义AngularJs UI-Grid Tree基本标头

1 个答案: