Блог

Главная - Вопросы по программированию - Шаблоны ячеек на основе значения ячейки

Шаблоны ячеек на основе значения ячейки

#angular-ui-grid #celltemplate

#angular-ui-grid #шаблон ячейки #celltemplate

Вопрос:

У меня есть сетка angular, в которой строка первого столбца должна отображаться как привязка или метка, основанная на условии javascript, при котором значение ячейки не начинается с символа ‘M’. Если значение ячейки столбца 1 начинается с символа ‘M’, столбец должен быть меткой, в противном случае это должна быть ссылка hyeprlink. Я верю, что мне нужно использовать два разных шаблона ячеек, но не уверен, как вызвать их в событии привязки данных строки в uigrid. Ниже приведен код.

Шаблоны для привязки и метки: 

 var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'  
               '  <a  class="text-blue-color text-underline" href="'   getURL()   '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}amp;from=linkcomfortamp;Style='   Style   '" target="_blank";">{{row.entity.TagNumber}}</a>'  
               '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'  
              '  <label>{{row.entity.TagNumber}}</label>'  
              '</div>';

Ниже приведена сетка 

         $scope.ComfortPlanGrid = {
        enableGridMenu: true,
        exporterMenuCsv: true,
        exporterMenuPdf: false,
        gridMenuShowHideColumns: true,
        enableRowSelection: false,
        enableColumnMenus: false,
        enableFiltering: false,
        enablePaging: false         

    };
    $scope.ComfortPlanGrid.columnDefs = config.headers.comfortPlansHeadersGrid;

Ниже приведены заголовки сетки

    var headers = {
    comfortPlansHeadersGrid: [
        { field: 'TagNumber', width: 130, displayName: 'Claim Tag Nbr', cellTemplate: linkCellTemplate },
        { field: 'CustomerNumber', width: 200, displayName: 'Customer/Dealer' },
        { field: 'Status', width: 80, cellTooltip: true },
        { field: 'StatusDate', width: 175, displayName: 'Status Date' },
        { field: 'Description', displayName: 'Description', width: 270, cellTemplate: claimDetailTemplate },
        { field: 'ContractNumber', width: 200, displayName: 'Contract Number', headerTooltip: 'Contract Number' },
        { field: 'ServiceDate', width: 175, displayName: 'Service Date', headerTooltip: 'Service Date' }
    ]};

Любая помощь о том, как этого добиться, приветствуется.

Комментарии:

1. Я могу выполнить проверку, используя приведенный ниже шаблон ячейки, но я хотел бы вызвать какую-нибудь другую функцию javascript для проверки также внутри celltemplate . Приветствуются любые идеи, как вызвать функцию javascript также в ng-if.

2. Обновлен код шаблона ячейки: var linkCellTemplate = ‘<div class=»ngCellText», ng-class=»col.colIndex()»>’ ‘<div ng-if=»строка.сущность. Номер тега.подстрока(0,1).Верхний регистр() !==’M'»> <a class=»текст-подчеркивание текста синим цветом» href=»‘ getURL() ‘/ClaimDetail/Index? TagNumber={{строка.сущность. Номер тега}}amp;from=linkcomfortamp;Style=’ Style ‘» target=»_blank»;»>{{строка.сущность. Номер тега}}</a></div>’ ‘ <div ng-if=»строка.сущность. Номер тега.подстрока(0,1).Верхний регистр() ===’M'»> <метка>{{строка.сущность. Номер тега}}</label></div>’ ‘</div>’;

Ответ №1:

Попробуйте приведенный ниже код:

Добавьте celltemplate в coldef в соответствующем столбце

 cellTemplate: DisplayConditionalTemplate(value)


function DisplayConditionalTemplate(value){
var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'  '  <a  class="text-blue-color text-underline" href="'   getURL()   '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}amp;from=linkcomfortamp;Style='   Style   '" target="_blank";">{{row.entity.TagNumber}}</a>'                    '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' '  <label>{{row.entity.TagNumber}}</label>'                    '</div>';

if(value.charAt(0) === 'M')
   return labelCellTemplate;
else
  return linkCellTemplate;
}