在ui-grid

Question

我在ui-grid中有几个独特的案例，其中某些表内容的单元格需要额外的类，甚至分配样式规则，因此这些单元格的外观与其他单元格相比更加突出。通过官方的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);
        });

“相关文档”中的内容最初设置为Missing（原始的rest调用没有返回任何内容，过滤器调用将其设置为。但是，稍后调用实际上每行加载相关文档，我相信不活动这个特定调用的网格是导致没有在这里设置类的原因。

关于这里最佳方法的想法？

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}
  ],
  .......

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