2015-07-13 4 views
0

Я хочу удалить лишний столбец значков для расширения и свернуть и объединить его с моим главным столбцом древовидной базы.Удалить дополнительный столбец значков из 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); 
    } 
    }); 
} 

ответ

3

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 и может быть изменен так, как вам нравится.

+0

Можете ли вы сделать plnkr и поделитесь – Kathir

+0

Нет, спасибо, я сделал ошибку, теперь она полностью работает :) позвольте мне удалить мой предыдущий комментарий слишком –

+0

Как showTreeRowHeader: ложные дела для меня, но теперь у меня есть большой набор данных, так в первом столбце, пока данные не загружены, проверьте следующую ссылку: http://tidal41.tidalhosting.com/qc/auditor-new/index1.html –

0

Предыдущий ответ добавления следующего шаблона ячейки в столбце 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>" 

Это сохраняет все elememnts одного и того же уровня с тем же отступом. Не забудьте установить showTreeExpandNoChildren: false (если вы загружаете данные таблицы за один снимок).

Смежные вопросы