Угловая сетка пользовательского интерфейса с несколькими расширяемыми уровнями и объединенными ячейками

Question

У меня есть поршень.

Я использую angular-ui-grid с двумя уровнями расширяемых рядов.

1. Люди - расширяемые
2. Друзья - расширяемые
3. Домашние животные - обычные

Уровень People имеет этот расширяемый ряд шаблонов

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable  style="height:150px;"></div>

и эти варианты:

$scope.gridOptions = {
  expandableRowTemplate: 'expandableRowTemplate.html',
  expandableRowHeight: 150
}

Уровень друзей имеет этот элемент expandableRowTemplate:

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

и эти варианты:

data[i].subGridOptions = {
      columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
      data: friends,
      expandableRowTemplate: 'expandableRowTemplate2.html',
      rowTemplate: 'rowTemplate.html'
    }

Уровень домашних животных имеет следующие параметры:

friends[j].subGridOptions = {
      columnDefs: [ {name:"Name", field:"name"} ],
      data: friends[j].pets
    }

На уровне друзей я хочу иметь возможность отображать имя группы с объединенными ячейками и одним фрагментом текста. Вроде как заголовок, но внутри списка. Список будет отсортирован заранее, поэтому я могу просто вставить несколько имен групп, где я хочу их. Это делается путем добавления пользовательского шаблона строки (см. Выше) к этому уровню и проверки идентификатора строки следующим образом (на самом деле я протестирую свойство):

<div>
  <div ng-if="row.entity.id !== 0">
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"  ui-grid-cell></div>
  </div>

  <div ng-if="row.entity.id === 0" >
    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"
         class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
         >
    </div>

     <div class="ui-grid-cell-contents">
        <div>
          {{row.entity.name}}
        </div>
      </div>

  </div>
</div>

Этот способ отлично работает в других примерах, когда не используются расширяемые строки.

При использовании расширяемых строк кажется, что строка, в которой я хочу показать имя группы, отображается дважды, один раз правильно и один раз в ячейке заголовка строки (см. Розанна Баррет на рисунке ниже)

как я могу предотвратить это? Я хочу, чтобы текст отображался только один раз

Answer 1

После некоторой отладки и копания в src. Я нашел причину в расширяемой сетке. Гирд создает два контейнера, один для расширяемой иконки, а другой для содержимого. Поэтому, когда мы применяем данные, содержимое дублируется в контейнере, в котором есть кнопка расширения, и в контейнере с текстом.

Единственный способ решить эту проблему - использовать функциональность строки слияния и проверить свойство контейнера, содержащего эти ячейки, к которому может обращаться colContainer в области видимости.

ячейка расширяемой кнопки имеет имя colContainer как "левый", а содержимое имеет имя colContainer как "тело".

То, что я сделал для строки слияния, это добавление истины слияния и заголовка образца к набору данных.

var friends = data[i].friends;
friends.unshift({
  merge: true,
  title: 'Test',
  bodyTitle: 'Body Title'
});

Далее нужно изменить rowtemplate.html

<div>
   <div ng-if="row.entity.merge && colContainer.name == 'left'">{{row.entity.title}}</div>
   <div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"  ui-grid-cell></div>
</div>

или же

<div>
   <div ng-if="row.entity.merge && colContainer.name == 'body'">{{row.entity.title}}</div>
   <div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"  ui-grid-cell></div>
</div>

Выберите любой из них в зависимости от того, где вы хотите показать заголовок. Я предпочитаю "тело" из-за ограничений по ширине, размещаемых в ячейке расширяемой кнопки.

Пример Plunkr http://plnkr.co/edit/wGhvtVGwouO01thkx9Z6?p=preview

Примечание. В примере с Plunkr в шаблоне строки есть и "left", и "body". Так что вы можете увидеть разницу.