UI 그리드 - 데이터 서식 지정

Question

새로운 Angular UI Grid (ng-grid를 대체 할 예정)을 사용 중입니다. 테이블에 표시되기 전에 내 데이터에 서식이 필요합니다. 예를 들어, 내 서버는 "status"라는 이름의 속성을 숫자로 반환하지만 좋은 이름으로 표시하려고합니다.

상태 = 1 개 디스플레이 "도도"의 경우, 경우 상태 = 2 디스플레이 "이렇게"등이이 UI 그리드에서 할 수있는 방법

?

Answer 1

첫 번째 단계, 컬럼에 cellTemplate을 추가

$scope.gridOptions.columnDefs = [ 
    {field:'status', displayName: 'Status',cellTemplate: 'statusTemplate.html'} 
]; 

템플릿 파일은 (COL_FIELD 실제 필드)과 같아야합니다

<div style="text-align: center">{{COL_FIELD==1 ? 'Todo' : 'Doing'"}}</div> 

희망, 당신은 생각이있어 ! :)

Answer 2

선호하는 방법은 이제 사용자 지정 템플릿 대신 cellFilter를 사용하는 것입니다. 사용자 정의 템플릿은 정상이지만 업그레이드시 더 많은 작업을 부과합니다. 새 기능에 템플릿을 수정해야하는지 확인해야합니다.

가 튜토리얼 필터의 적절한 예이다 http://ui-grid.info/docs/#/tutorial/201_editable

주 성 칼럼에 cellFilter: 'mapGender'는 필터 자체가 가이드에 추가로 정의 :

가

.filter('mapGender', function() { 
    var genderHash = { 
    1: 'male', 
    2: 'female' 
    }; 

    return function(input) { 
    if (!input){ 
     return ''; 
    } else { 
     return genderHash[input]; 
    } 
    }; 
}) 

Answer 3

최단의 방법은 appScopeProvider를 사용하여 CellTemplate을 사용하십시오.

vm.gridOptions = { 
     columnDefs: [ 
      { 
       field: 'status', 
       cellTemplate: '<div>{{grid.appScope.formatStatus(row)}</div>' 
      } 
     ], 
     appScopeProvider: { 
      formatStatus: function (row) { 
       return row.entity.status === 1 ? 'Todo' : 'Doing'; 
      }, 
     } 
    }