在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中更改單元格的類值或樣式

回答

相關問題