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

问题描述

我想删除图标额外列展开和折叠，并与我的主要treebase列合并。
Plunkr来源

在下面的链接，你可以看到在树上观看膨胀和崩溃产生额外的列，但我想用我的第一列（名）合并它，我也想改变图标。请帮我，我怎么能做到这一点。

  onRegisterApi：功能（gridApi）{
  $ scope.gridApi = gridApi;
  $ scope.gridApi.treeBase.on.rowExpanded（$范围，功能（行）{
    如果（row.entity $$ hashKey === $ scope.gridOptions.data [50] $$ hashKey＆放大器;＆安培;！$ scope.nodeLoaded）{
      $间隔（函数（）{
        $ scope.gridOptions.data.splice（51,0，
          {名称：'动态1，性别：'女'，年龄：53，公司本着：Griddable网格，天平：38000，$$ treeLevel：1}，
          {名称：'动态2'，性别：男，年龄：18，公司本着：Griddable网格，天平：29000，$$ treeLevel：1}
        ）;
        $ scope.nodeLoaded =真;
      }，2000，1）;
    }
  }）;
}
 

解决方案

在的rowHeader可以仅仅通过一个属性隐藏，

  showTreeRowHeader：假的，
 

要具备树中展开按钮作为第一列的一部分，你只需要复制的模板，因为细胞的一部分。定义单元格模板这样，

  {名称：'名'，宽度：'30％'，cellTemplate：＆LT; D​​IV CLASS = \\UI并网细胞内容\\TITLE = \\TOOLTIP \\＆GT;＆LT; D​​IV的风格= \\浮动：左; \\级= \\UI格树基排头，按键\\纳克级= \\{UI并网树形基头：row.treeLevel＆GT; -1} \\NG点击= \\grid.appScope.toggleR​​ow（行，EVT）\\＆GT;＆LT;我纳克级= \\{UI并网图标负方'：（（网格.options.showTreeExpandNoChildren＆放大器;＆放大器; row.treeLevel -1个）||（row.treeNode.children＆放大器;＆放大器; row.treeNode.children.length大于0））及＆放大器; row.treeNode.state ===扩大，UI-网格图标加平方'：（（grid.options.showTreeExpandNoChildren＆放大器;＆放大器; row.treeLevel -1个）||（row.treeNode。儿童＆放大器;＆放大器; row.treeNode.children.length大于0））及＆放大器; row.treeNode.state ==='崩溃'} \\NG式= \\{'填充左'：grid.options.treeIndent * row.treeLevel +'像素'} \\＆GT;＆LT; / I＆GT; ＆安培; NBSP;＆LT; / DIV＆GT; {{COL_FIELD CUSTOM_FILTERS}}＆LT; / DIV＆gt;中}，
 

这plnkr显示工作模式， http://plnkr.co/edit/ rkHZs0？p = preVIEW

现在改变图标，所有你需要做的是改变

 ＆LT;我纳克级= \\{UI并网图标负方'：（（grid.options.showTreeExpandNoChildren＆安培;＆安培; row.treeLevel＆GT; -1）||（row.treeNode.children＆放大器;＆放大器; row.treeNode.children.length大于0））及＆放大器; row.treeNode.state ===膨胀，UI-网格icon-加平方'：（（grid.options.showTreeExpandNoChildren＆放大器;＆放大器; row.treeLevel -1个）||（row.treeNode.children＆放大器;＆放大器; row.treeNode.children.length大于0））及＆安培; row.treeNode.state ==='崩溃'} \\NG式= \\{'填充左'：grid.options.treeIndent * row.treeLevel +'像素'} \\＆GT;＆LT; / I＆GT;
 

在细胞模板。默认模板使用UI的网格图标加方和UI格图标减平方和可以改变任何你喜欢的。

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

解决方案

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>" },

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>

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.

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