Изменение значений или стилей ячеек в ui-grid

Question

У меня есть несколько уникальных случаев внутри ui-сетки, где ячейкам определенного содержимого таблицы нужен дополнительный класс или даже назначенные правила стиля, поэтому внешний вид для этих ячеек выделяется по сравнению другим. Просмотрев официальную документацию по ui-grid, я обнаружил, что это можно сделать с помощью cellTemplate, но я не мог получить никаких согласованных результатов. Какой лучший подход здесь?

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

//Define Grid Headings 
$scope.scheduledPatientAppointments = [ 
     { 
      field: 'appointment_date', 
      displayName: 'Appointment Date' 
     }, 
     { 
      field: 'doctor_name', 
      displayName: 'Doctor Name' 
     }, 
     { 
      field: 'procedure_type_eng', 
      displayName: 'Medical Procedure Type' 
     }, 
     { 
      field: 'appointment_status_eng', 
      displayName: 'Appointment Status' 
     }, 
     { 
      field: 'docs_received', 
      displayName: 'Related Documents', 
      cellTemplate: '<div class="ui-grid-cell-contents" ng-click="grid.appScope.loadDocumentsModal(\'{{row.entity.id}}\')">{{grid.getCellValue(row, col) | hasDocuments}}</div>', 
      cellFilter: 'hasDocuments', 
      cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) { 
       if (grid.getCellValue(row, col).toLowerCase() === 'missing') { 
        return 'missing'; 
       } else if (grid.getCellValue(row, col).toLowerCase() === 'received') { 
        return 'received'; 
       } else { 
        return 'undefined'; 
       } 
      } 
     } 
    ]; 

// Define Grid Options 
$scope.PatientAppointmentsGrid = { 
    selectionRowHeaderWidth: 25, 
    enableHorizontalScrollbar: false, 
    rowHeight: 35, 
    enableSorting: true, 
    columnDefs: $scope.columnsPatient, 
    data: [], 
    onRegisterApi: function (gridApi) { 
     $scope.gridApi = gridApi; 
    } 
};  

//Behavior for patient page load 
$scope.appointmentsProvider = patientsService.patientFactory.getAppointmentsForPatient($stateParams.id).then(
     function successCallback(response) { 
      var preFetchData = response.data.data; 
      angular.forEach(preFetchData, function (value, key) {documentsService.documentsFactory.getDocumentsByAppointmentId(value.id).then(
         function successCallback(response2) { 

          if (response2.data.length >= 1) { 
           //Append value state to the preFetchData object (count size) 
           var totalFiles = response2.data.length; 
           preFetchData[key].docs_received = totalFiles; 
          } else { 
           preFetchData[key].docs_received = 0; 
          } 
         }, function errorCallback(response2) { 
        console.debug("Error", response2); 
       }); 
      }); 

      $scope.PatientAppointmentsGrid.data = preFetchData; 
     }, 
     function errorCallback(response) { 
      console.debug("Error", response); 
     }); 

Содержания из «Связанных документов» являются Initally установленный в Missing (исходный вызов останова ничего не возвращает, и вызов фильтра устанавливает его на это. Однако более поздний вызов фактически загружает связанные документы в строку, и я считаю, что бездействие сетки в этом конкретном вызове - это то, что не вызывает никакого класса

Мысли о наилучшем подходе здесь

Answer 1

добавления пользовательского класса с CellTemplate:

columnDefs: [ 
    { 
     name:'firstName', 
     field: 'first-name', 
     // adding custom class 
     cellTemplate: "<div class=\"ui-grid-cell-contents custom-class\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>" 
    }, 
    { name:'1stFriend', field: 'friends[0]' }, 
    { name:'city', field: 'address.city'}, 
    { name:'getZip', field: 'getZip()', enableCellEdit:false} 
    ], 
    ....... 

существует множество предопределенных настраиваемых шаблонов определяется $ templateCache в нижней части https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.js

добавив свой стиль:

....... 
onRegisterApi: function(gridApi){ 
    //set gridApi on scope 
    $scope.gridApi = gridApi; 
    // adding custom style 
    gridApi.grid.registerStyleComputation({ 
     func: function() { 
     return [ 
      '.custom-class {       ', 
      ' color: red;        ', 
      ' font-weight: bold;      ', 
      '}           ', 
      '.ui-grid-row:nth-child(1) .custom-class { ', 
      ' color: blue;       ', 
      '}           ' 
     ].join('\n'); 
     } 
    }); 
    } 

плункер: http://plnkr.co/edit/YbnYoWLlEYzwmjuKOFa0?p=preview