在ui-grid中更改单元格的类值或样式

我在ui-grid中有几个独特的例子，其中某些表格内容的单元格需要额外的类，甚至分配了样式规则，因此这些单元格的外观比较突出给他人。通过官方的ui-grid文档，我发现它可以用cellTemplate完成，但是我无法获得任何一致的结果。这里最好的方法是什么？在ui-grid中更改单元格的类值或样式

下面是代码改变我之前已经尝试，意图是基于从过滤器调用返回的值更改类名称进行

//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（原来的rest调用不会返回任何结果，过滤器调用会将其设置为该值），但稍后的调用实际上会为每行加载关联的文档，并且我认为此特定调用中网格的不活动是导致没有class

想法在这里最好的办法？

来源

2016-09-27 Cameron Kilgore

将包括你迄今为止尝试过的示例代码是很好的，并且更详细地解释什么是不一致的关于当前的方法或者它表现出什么样的行为是不希望的。 – shaunhusain

当然，我添加了一些示例代码并阐明了我的目标，以及如何实现。 –

添加自定义类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} 
    ], 
    .......

有很多在https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.js

添加自定义样式底部与$ templateCache定义的预定义的自定义模板：

....... 
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'); 
     } 
    }); 
    }

plunker：http://plnkr.co/edit/YbnYoWLlEYzwmjuKOFa0?p=preview

来源

2016-09-27 20:23:33 Andriy

在ui-grid中更改单元格的类值或样式

回答

相关问题