從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

回答

相關問題