동적으로 생성 된 각도 ui-grid에 대해 열 너비를 설정하십시오.

Question

그리드의 열 너비를 설정하려고합니다.

API 호출에서 데이터를 가져 와서 그리드에 표시하기 위해 약간 재구성합니다. 그거야. 나는 그리드에 얼마나 많은 열이 있는지 알지 못한다. 그래서 $scope.gridOptions.columnDef을 빈 배열로 정의했다.이 경우 그리드에 데이터가있을 때 동적으로 열을 렌더링하지만,이 경우 열 너비를 어떻게 설정할 수 있는가?

코드 :

$scope.gridOptions = { 
      enableGridMenu: false, 
      paginationPageSizes: [10, 25, 50], 
      paginationPageSize: 10, 

      enableFiltering: false, 
      rowHeight: 40, 
      // selection 
      enableRowSelection: true, 
      enableRowHeaderSelection: false, 
      multiSelect: false, 
      modifierKeysToMultiSelect: false, 
      noUnselect: true, 
      columnDefs: [], 
      onRegisterApi: function (gridApi) { 
       $scope.gridApi = gridApi; 
      } 

     }; 

     $scope.gridOptions.columnDefs = []; 

     $scope.$watch('filter', function (newVal, oldVal) { 

      var array = []; 

      if (typeof newVal !== 'undefined') { 
       param.query = newVal; 

       lovServices.events(param) 
        .then(function (response) { 

         var events = response.events; 

         angular.forEach(events, function (field) { 

          var custom = field.eventProperties; 

          var tempObj = {}; 

          tempObj.title = field.title; 
          tempObj.description = field.description; 
          tempObj.studyName = field.studyName; 

          for (var i = 0; i < custom.length; i++){ 

           tempObj[custom[i].name] = custom[i].value 
          } 

          array.push(tempObj); 
         }); 

         $scope.gridOptions.data = array; 

         for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) { 
          $scope.gridOptions.columnDefs[i].width = '*'; 
         } 

         $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
         $scope.gridApi.core.refresh() 

        }) 
      } 
     }); 

당신이 볼 수 있듯이, 코드, 분명 거기에 오류가 콘솔에없는 내 폭 정의가 작동하지 않습니다.

그래서 나는 무엇을 놓치고 있습니까? 어떤 도움을 주셔서 감사합니다.

Answer 1

그래서 init 데이터를 console $ scope.gridOptions.columnsDef에 체크인했습니다. 빈 배열 이었으므로 init 후에 interval을 설정하고 마침내 작동합니다!

아래

내 코드 : 스크롤 용

$scope.gridOptions.data = array; 

        $interval(function() { 
         for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) { 
          $scope.gridOptions.columnDefs[i].width = '20%'; 

         } 

         $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); 
         $scope.gridApi.core.refresh() 
        }) 

CSS :

#cp-grid .ui-grid-render-container-body .ui-grid-viewport { 
    overflow-x: scroll !important; 
} 

Answer 2

일반 수 또는 비율 값으로 width 속성을 설정하십시오. 예 : 50 또는 '50 % ';