Question

我想删除额外的图标列以进行展开和折叠，并将其与我的主树库列合并。 Plunkr Source

在以下链接中，您可以看到它在树视图中创建了额外的列以进行扩展和折叠，但我想将其与我的第一列（名称）合并，我还想更改图标。请帮助我，我怎样才能实现这一点。

onRegisterApi: function( gridApi ) {
  $scope.gridApi = gridApi;
  $scope.gridApi.treeBase.on.rowExpanded($scope, function(row) {
    if( row.entity.$$hashKey === $scope.gridOptions.data[50].$$hashKey && !$scope.nodeLoaded ) {
      $interval(function() {
        $scope.gridOptions.data.splice(51,0,
          {name: 'Dynamic 1', gender: 'female', age: 53, company: 'Griddable grids', balance: 38000, $$treeLevel: 1},
          {name: 'Dynamic 2', gender: 'male', age: 18, company: 'Griddable grids', balance: 29000, $$treeLevel: 1}
        );
        $scope.nodeLoaded = true;
      }, 2000, 1);
    }
  });
}

Answer 1

rowHeader只能由属性

隐藏

showTreeRowHeader: false,

要将树展开按钮作为第一列的一部分，您只需将模板复制为单元格的一部分。像这样定义单元格模板，

 { name: 'name', width: '30%' , cellTemplate : "<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\"><div style=\"float:left;\" class=\"ui-grid-tree-base-row-header-buttons\" ng-class=\"{'ui-grid-tree-base-header': row.treeLevel > -1 }\" ng-click=\"grid.appScope.toggleRow(row,evt)\"><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>{{COL_FIELD CUSTOM_FILTERS}}</div>" },

此plnkr显示工作模型http://plnkr.co/edit/rkHZs0?p=preview

现在要更改图标，您需要做的就是更改

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

在单元格模板中。默认模板使用ui-grid-icon-plus-squared和ui-grid-icon-minus-squared，可以更改为你喜欢的任何内容。

Answer 2

在列defenition中添加以下单元格模板的上一个答案对我有用，

cellTemplate: "<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\"><div style=\"float:left;\" class=\"ui-grid-tree-base-row-header-buttons\" ng-class=\"{'ui-grid-tree-base-header': row.treeLevel > -1 }\" ng-click=\"grid.appScope.toggleRow(row,evt)\"><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>{{COL_FIELD CUSTOM_FILTERS}}</div>"

但请记住将 uiGridTreeBaseService 添加到app控制器，然后将以下方法添加到控制器中，

$scope.toggleRow = function(row, evt) {
    uiGridTreeBaseService.toggleRowTreeState($scope.gridApi.grid, row, evt);
};

如果你错过了最后两个步骤，那么树不会在单击加号时展开。

在此之后，我遇到了一些没有孩子的行的困难。他们的缩进不合适。以下是我最终使用的单元格模板，

 cellTemplate: "<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\"><div style=\"float:left;\" class=\"ui-grid-tree-base-row-header-buttons\" ng-class=\"{'ui-grid-tree-base-header': row.treeLevel > -1 }\" ng-click=\"grid.appScope.toggleRow(row,evt)\"><i ng-class=\"{'ui-grid-icon-down-dir': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'expanded', 'ui-grid-icon-right-dir': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'collapsed', 'ui-grid-icon-blank': ( ( !grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) && !( row.treeNode.children && row.treeNode.children.length > 0 ) )}\" ng-style=\"{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}\"></i> &nbsp;</div>{{COL_FIELD CUSTOM_FILTERS}}</div>"

这使得同一级别的所有元素保持相同的缩进。不要忘记设置 showTreeExpandNoChildren：false （如果您一次性加载表数据）。

从Angular UI-Grid TreeView中删除额外的图标列

2 个答案: