셀 필터를 호출하는 Ng 표 내보내기

Question

NG 그리드에서 작업 중이며 일부 열에 필터가 적용되어 있습니다. 내가 CSV로 내보낼 때, 현재 값은 필터없이 표시됩니다 레코드가 JSON이 추천하기 추천 수 :

Service Date |Service Desc | Price 
------------------------------------- 
Feb 10,2014 |Some Job 3 | $1,234.56 

I :

{"service_date":"2014-02-10T00:00:00.000Z", 
"service_code":"someJob3", 
"price":1234.56} 

하지만, 그리드가 표시됩니다

'필터가 적용된 것처럼 보이지만 CSV 플러그인 만 셀 필터를 호출하는 것처럼 보이지 않고 단순히 원시 형식의 값을 반환하는 것처럼 추출물을 얻으면 좋습니다. 필터를 호출하려면 어떻게해야합니까?

Answer 1

나는이 질문이 몇 달 전 이었지만 나는 똑같은 것을 찾고 있었고 나는 그 문제를 어떻게 해결했는지 설명 할 것이라고 생각했다.

사이드 노트 : 나는 플러그인 폴더에 ng-grid-wysiwyg-export.js 플러그인이 있음을 보았다 그러나 나는 그것의 사용에 아무런 예제 나 문서를 발견하고 그것을 알아 내기 위해 시간이 걸릴하지 않았다

I 때문에 ...은 CSV 플러그인에 대한 예제가있는 ng-grid plugins 폴더에 playground.html 파일이 있음을 확인했습니다. 당신은 당신이 원하는 각 열에 대한 재정의 함수를 정의 할 수 있습니다 위의 문제의 예를 들어, 그래서

$scope.myData = [ 
    {hasThing: false, obj: {a:5, b:6}, name: "Moroni", age: 50, ln: 'sdf'}, 
    {hasThing: true, obj: {a:6, b:7}, ln: "Tiasdfsdfnd", age: 43} 
]; 

var csvOpts = { columnOverrides: { obj: function(o) { return o.a + '|' + o.b; } } }; 

$scope.gridOptionsBig = { 
    data: 'myData', 
    plugins: [new ngGridCsvExportPlugin(csvOpts)], 
    showFooter: true 
}; 

: 그것은 columnOverrides에게 당신이 opts 매개 변수를 통해 플러그인 생성자로 전달할 수 있습니다 기능을 사용하는 방법을 설명 과 같이,에 필터를 적용 :

var csvOpts = { 
    columnOverrides: { 
     service_date: function(d) { return $filter('date')(d); }, 
     service_code: function(c) { return $filter('myCustomCamelCaseFilter')(c); }, 
     price: function(p) { return $filter('currency')(p); } 
    } 
}; 

그것을 다음을 정의해야하는 약간의 추가 작업이 바로 columnDefs에서 이미 정의 된 cellFilter를 호출하는 대신이지만,이 방법은 당신에게 당신의 수출을 할 수있는 유연성을 제공 않습니다 데이터가 약간 다르다. 화면에 표시되는 내용 ... 아마도 더 표현적인 날짜 형식 등일 수 있습니다.

Answer 2

ui-grid (ng-grid의 대체 버전)와 함께 작동하는 솔루션을 발견했으며 플러그인보다 훨씬 간단합니다. 매트 웰치가 ng-grid 2.0을 위해 개발해야했던 해결 방법.

grid0ptions에 exporterFieldCallback을 지정하고 col.name을 기반으로 원하는대로 수행 할 수 있습니다. 필자의 경우 사용자 ID가 있었는데 배열 인덱스에 대한 참조를 교차해야했습니다. 콜백 그리드, 행 안부, 입력 변수를 필요로

$scope.gridOptions = { 
    ... 

    exporterFieldCallback: function(grid, row, col, input) { 
     if(col.name == 'account_executive_id' || col.name == 'account_manager_id') { 
      return adminUsers.getUserName(input); 
     } else { 
      return input; 
     } 
    }, 
    ... 
} 

: 내가 지금처럼 exporterFieldCallback을 추가 할 때까지 나는 내 보낸 CSV 테이블에 대한 cellFilter을 구축했던, 그러나 그것은 분명히 반영되지 않았다 그런 다음 내부에있는 작업을 수행하여 내보낼 값을 반환 할 수 있습니다. "그리드에 표시된 것을 사용하십시오"플래그가 있으면 좋겠지 만 문서화되지 않은 것처럼 보일지라도 이것은 여전히 ​​매우 간단한 해결책입니다.

Answer 3

나는이를 위해 exporterFieldCallback을 기반으로 개발되었습니다.

내 생각처럼 columnDefs 당신이 이미 가지고있는 필터 식을 반복하지 마십시오 것입니다 : 물론, notAvailable 및 readableFileSize이에 의해 저에 의해 정의 정기적으로 사용 모두 사용자 정의 필터입니다,

{ 
    field: 'totalFileSize', 
    headerCellClass: $scope.highlightFilteredHeader, 
    cellFilter: "notAvailable:'N/A' | readableFileSize", 
    displayName: "Total size", 
    cellClass:"rightcell" 
    }, 

UI 그리드.

exporterFieldCallback: function(grid, row, col, input) { 
    if (col.cellFilter!=undefined && col.cellFilter.length !=0) { 
    var filters = col.cellFilter.split('|'); 
    for(i =0; i<filters.length;i++) { 
     var pars = filters[i].match(/[^\:"']+|'([^']*)'|'([^']*)'+/g); 
     var filterName= pars[0].trim(); 
     var filterPar = null; 
     if (pars.length ==2) { 
     filterPar = pars[1].slice(1, -1); 
     input = $filter(filterName)(input,filterPar); 
     } else { 
     input = $filter(filterName)(input); 
     } 
    } 
    } 
    return input; 

} 

내가 자바 스크립트 더미이기 때문에 좋지 않습니다. 매개 변수 나 매개 변수 하나도 허용하지 않는 필터에서만 작동합니다. 그러나 확실히 향상 될 수있다, 나는 서둘 렀다. 또한 정규식에서 대부분 중복이 있습니다.

열에 대해 정의 된 경우 cellFilter를 사용하고 프로그래밍 방식으로 다시 적용합니다. 이 단일 일반 함수를 사용하여 모든 ui-grid의 모든 열에 내보내기를 추가했습니다.

Answer 4

'angelodelia'의 응답을 기반으로합니다. 여기 수정 된 버전이 있습니다. 여러 매개 변수가있는 다중 필터에서 작동합니다. 이 일반적인 기능이 UI 그리드에 표시됩니다로 데이터를 내보낼 도움이 될 것입니다

exporterFieldCallback: function (grid, row, col, input) { 
      if (col.cellFilter) { // check if any filter is applied on the column 
       var filters = col.cellFilter.split('|'); // get all the filters applied 
       angular.forEach(filters, function (filter) { 
        var filterName = filter.split(':')[0]; // fetch filter name 
        var filterParams = filter.split(':').splice(1); //fetch all the filter parameters 
        filterParams.unshift(input); // insert the input element to the filter parameters list 
        var filterFn = $filter(filterName); // filter function 
        // call the filter, with multiple filter parameters. 
        //'Apply' will call the function and pass the array elements as individual parameters to that function. 
        input = filterFn.apply(this, filterParams); 
       }) 
       return input; 
      } 
      else 
       return input; 
     } 

(필터를 적용한 후에는.)