Можно ли убрать галочку с невыбираемых строк?

Мы используем ui-grid v3.1.1, и у нас есть конкретный вариант использования, когда в сетке необходимо, чтобы определенные строки были доступны для выбора, а другие нельзя было выбрать, в зависимости от кода конкретной ячейки в строке. Мы реализовали html сетки как:

<div id="gridSummary" ui-grid="gridOptions" class="grid-summary" ui-grid-auto-resize ui-grid-selection ui-grid-tree-view ui-grid-pinning>
        <div class="grid-empty" ng-show="!gridOptions.data.length">No Corresponding Data Found</div>
</div>

и мы экспериментировали с isRowSelectable gridOption, который делает то, что мы хотим, за исключением одной проблемы: мы не хотим, чтобы значок отключенной галочки появлялся в невыбираемых строках. Есть ли способ скрыть / свернуть галочку, когда строку нельзя выбрать?

Спасибо


css angularjs angular-ui-grid
person Gatmando    schedule 25.04.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете добиться этого, изменив rowHeaderIcon для невыбираемых строк.

Вы можете переопределить шаблон для кнопки заголовка строки выбора и добавить собственный CSS. Вставьте templateCache в свой контроллер и переопределите шаблон следующим образом.

$templateCache.put('ui-grid/selectionRowHeaderButtons',
    "<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\">&nbsp;</div>"
  );

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

Нашел этот полезный плункер.

person Pratik Bhat    schedule 04.05.2016
comment
Красивый. Большое спасибо за это. Работает шарм. - person Gatmando; 10.05.2016

arrow_upward
0
arrow_downward

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

  $templateCache.put('ui-grid/selectionRowHeaderButtons',
    "<div ng-class=\"{'ui-grid-selection-row-header-buttons': grid.appScope.isSelectable(row), 'ui-grid-icon-ok' : grid.appScope.isSelectable(row), 'ui-grid-row-selected': row.isSelected}\" ng-click=\"selectButtonClick(row, $event)\">&nbsp;</div>"
  );
person Wayne    schedule 19.10.2017