从 Angular UI-Grid TreeView 中删除额外的图标列 [英] Remove extra column of icons from Angular UI-Grid TreeView

问题描述

我想删除用于展开和折叠的额外图标列，并将其与我的主树库列合并.Plunkr 源

I want to remove extra column of icons for expand and collapse and merge it with my main treebase column. Plunkr Source

在以下链接中，您可以看到在树视图中，它为展开和折叠创建了额外的列，但我想将其与我的第一列(名称)合并，并且我还想更改图标.请帮助我，我怎样才能做到这一点.

In the following link you can see that on a tree view it creates extra column for expansion and collapse but i want to merge it with my first column (name) and i also want to change the icon. Please help me that how can i achieve that.

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);
    }
  });
}

推荐答案

rowHeader 可以通过属性隐藏，

The rowHeader can be hidden just by a property,

showTreeRowHeader: false,

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

To have the tree expand buttons as part of the first column, you just need to replicate the template as part of the cell. Define the cell template like this,

 { 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=预览

This plnkr shows a working model, http://plnkr.co/edit/rkHZs0?p=preview

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

Now to change the icons, all you need to do is to change the

<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，您可以随意更改.

in the cell template. The default template uses ui-grid-icon-plus-squared and ui-grid-icon-minus-squared and can be changed to whatever you like.

这篇关于从 Angular UI-Grid TreeView 中删除额外的图标列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！