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

我想删除额外的图标列以进行展开和折叠，并将其与我的主树形结构列合并。 Plunkr Source 从Angular UI-Grid中删除额外的图标列TreeView

在下面的链接中，您可以看到在树形视图中它为扩展和折叠创建了额外的列，但我想将它与我的第一列（名称）合并，并且我还想更改图标。请帮助我，我该如何实现这一目标。

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

来源

2015-07-13 Zaid Iqbal

的的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，并且可以更改为任何你喜欢的。

来源

2015-07-13 18:29:07 Kathir

你可以做一个plnkr和共享 – Kathir

没有感谢我犯了一个错误，现在它完全是工作:) 让我删除我之前的评论太 –

作为showTreeRowHeader：假对我的作品，但现在我有一个大的数据集，从而第一列显示直到数据未加载请检查以下链接：http://tidal41.tidalhosting.com/qc/auditor-new/index1.html –

列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到应用程序控制器，然后添加下面的方法到控制器，

$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（如果您一次加载表格数据）。

来源

2015-12-17 12:35:27

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

回答

相关问题