Расширяемая сетка UI-GRID. Программно расширить одну строку

Я хочу скрыть значок + в крайнем левом столбце и добавить еще один значок.

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

Я вижу, что есть gridApi.expandable.expandAllRows();

Есть ли способ расширить только одну строку?


person Michael JDI    schedule 03.06.2015    source источник


Ответы (2)


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

$templateCache.put('ui-grid/expandableRowHeader',
    "<div class=\"ui-grid-row-header-cell ui-grid-expandable-buttons-cell\"><div class=\"ui-grid-cell-contents\"><i ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" ng-click=\"grid.api.expandable.toggleRowExpansion(row.entity)\"></i></div></div>"
  );

Вы можете изменить ng-class=\"{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }\" и заменить их на другой значок по вашему выбору.

person Kathir    schedule 03.06.2015
comment
Могу ли я удалить знак + из левого столбца и добавить свой значок в другой столбец? - person Michael JDI; 05.06.2015
comment
Что вы подразумеваете под другой колонкой. Новый заголовок строки, отличный от столбца со знаком плюс. - person Kathir; 05.06.2015
comment
Ваше решение сработало. Я добавил свой собственный значок плюса в другой столбец и вызвал ваш API. Спасибо - person Michael JDI; 05.06.2015
comment
Катир, как полностью удалить расширяемый столбец? Теперь у меня работает собственная иконка, и мне не нужен столбец для встроенного расширения. - person Michael JDI; 05.06.2015
comment
Понятно. Еще раз спасибо Катир - person Michael JDI; 05.06.2015
comment
@Kathir Что такое $templateCache и куда мы должны добавить $templateCache.put? Любой plnkr или пример этого? - person Amir978; 21.06.2016
comment
@Катир. Я использую знак «+» для расширения строки, но «expandableRow» не установлен для родительской сетки, пока страница не будет перезагружена. См. мой вопрос по адресу stackoverflow.com/questions/44042217/ - person Microsoft Developer; 18.05.2017

Вы можете использовать функцию toggleRowExpansion, добавьте этот атрибут к нужному элементу, который будет запускать этот переключатель:

ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"

person Idan Gozlan    schedule 10.12.2015
comment
как мы поместим это в конкретную строку, если ui-grid генерирует строки/ячейки? Я хочу щелкнуть строку, чтобы развернуть и свернуть ее. - person FlavorScape; 10.02.2016