! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

loadXlsx 헤더값 가져오기 질문드립니다. > Q&A | 토론

본문 바로가기

PureJS loadXlsx 헤더값 가져오기 질문드립니다.

페이지 정보

작성자 맬그 작성일 2021-02-18 19:03 조회 4,430회 댓글 0건
제품 버전 : wijmo-5.20193.646

본문

첨부파일

이전 질문에 json으로 데이터 가져오는 부분 답변 너무 감사드립니다. 잘 해결 되었습니다.


grid.columns[0].binding


이부분이 

샘플데이터를 만들어서 생성하거나, 서버에서 가져와서 처리할때는 문제가 없이 잘 인식을 했습니다.


문제는


그 상태서 다시 파일선택 후 임포트를 눌렀을때 새로 만들어지는 그리드에 헤더값을 읽지를 못합니다.

헤더 체크를 하면 헤더에 값이 입력 된 후에


grid.columns[0].binding 하면 계속 null 이 찍히네요



onClick('loadXlsx', () => {

        let inputEle = document.querySelector('#importFile');

        if (inputEle.files[0]) {

       

       

        //wijmo.grid.xlsx.FlexGridXlsxConverter.loadAsync(grid, inputEle.files[0], { includeColumnHeaders: includeColumnHeader });

        if ($('#importIncludeColumnHeader').is(":checked")) {

        wijmo.grid.xlsx.FlexGridXlsxConverter.loadAsync(grid, inputEle.files[0], { includeColumnHeaders: true });

        } else {

        wijmo.grid.xlsx.FlexGridXlsxConverter.loadAsync(grid, inputEle.files[0], { includeColumnHeaders: false });

        }

       

        }


    });


여기서 파일 선택후 import 누르면 다시 불러온 엑셀이 다시 그려지는데 그때 data 처리 방법을 잘 모르겠습니다.


그래서 loadXlsx 이벤트 발생할때 

wijmo.grid.xlsx.FlexGridXlsxConverter.loadAsync(grid, inputEle.files[0], { includeColumnHeaders: false });


var c = new wijmo.grid.Column();

c.binding = 'test';

c.header = 'test';

c.width = '*';

grid.columns.push(c);


그 밑에 컬럼을 다시 생성 해봤더니 loadAsync 이게 마지막에 실행이 되더라고요




처음 로딩시


var data = [];


$(document).ready(function(){

var grid = new wijmo.grid.FlexGrid('#flexgrid', {

        itemsSource: data

    });


여기에 컬럼을 추가한다던지 옵션을 줬을때는 다 인식을 합니다만


그상태서 새로운 파일을 불러와서 다시 그렸을때 헤더값을 인식을 못합니다.

alert(grid.getCellData(0,0) 값들은 잘 가져오는데 헤더부분이 문제여서


헤더 처리 하는 방법을 알려주시면 감사드리겠습니다.




  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

PureJS Re: loadXlsx 헤더값 가져오기 질문드립니다.

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2021-02-23 13:10 댓글 4건

본문

안녕하세요 그레이프시티입니다.


먼저, FlexGrid로 엑셀 파일을 가져왔을 때는 해당 FlexGrid가 바운드 모드가 아니므로 열의 바인딩 속성을 바로 사용할 수 없습니다. binding 값을 가지오기 위해서는 수동으로 바인딩을 새롭게 생성하셔야 합니다. 


다만 2019 V3 버전에서는 가져온 엑셀 파일에서 열 머리글이 비어 있는 이슈가 있었습니다. 때문에 최신 버전으로 업그레이드하여 사용하시길 바랍니다.

구매하신지 1년 내의 버전까지 무료 업그레이드가 가능하시며 예를 들어 Wijmo 2019 V3 제품을 구매하셨다면 이후 1년 이내 제품인 2020 V3 까지 사용하실 라이선스 권한이 이미 포함되어 있으므로 2020 V3 까지 자유롭게 다운받아 사용하시면 됩니다.


더불어 병합된 셀을 가진 엑셀 파일이 import 할 때, 그리드에 적절하게 가져오지 못하는 이슈가 있습니다. 해당 이슈는 본사 개발팀에 전달 되었으며 업데이트 되는 내용이 있다면 공유 드리도록 하겠습니다. 


해당 샘플은 앞서 말한 이슈로 인해 2020 V3 기준으로 만들어졌습니다. 

FlexGridXlsxConvter.loadAsync 메서드에서 4번째 인자는 loadAsync 메서드가 실행을 끝 맞췄을 때, 콜백을 가져옵니다. 이 때, bindImportedDataIntoModel()  라는 사용자 정의한 함수를 불러와줍니다. 해당 함수 내부에서 다시 getImportedCVdata() 사용자 정의 함수를 호출하여 그리드의 itemsSource에 할당할 데이터를 만들어 줍니다. 이렇게 itemsSource에 할당된 후, 데이터 바인딩 값을 불러오기 위해 setTimeout  함수를 통해 그리드의 열에 바인딩된 값을 확인할 수 있습니다.


자세한 코드는 아래 샘플을 참고하시기 바랍니다.



[collectionView]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo.collectionview.html 


[loadAsync]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid_xlsx.flexgridxlsxconverter.html#loadasync 


도움말 문서도 전달 드리오니 참고하시기 바랍니다.

 

다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.



감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

맬그님의 댓글

맬그 작성일

안녕하세요 항상 질문에 답변 잘 달아주셔서 도움 많이 되었습니다.
업로드시 다시 질문 드리려는데 아무래도 샘플쪽에 다는게 나을거 같아 여기에 달게 되었습니다.

1.bind 시키고 나면 settime 이후 헤더가 자동정렬이 되는 문제가 있어서 막는 방법이 있는지 해서 질문드립니다. 임시방편으로 getImportedCVData 여기서 헤더값 가져올때 양쪽에 [ ] 를 넣어서 처리해서 막긴 했는데요 정렬 안되게 막는 방법이 있는지 궁금합니다.

2.파일업로드나 혹은 얼마전에 질문드린 헤더 수정기능을 사용할때 보면 필드명 첫글자가 대문자로 바뀌는데 안바뀌고 그대로 입력되는 옵션이 따로 있으면 알려주시면 감사드리겠습니다.

그럼 답변 기다리겠습니다. 감사합니다.

GCK루시님의 댓글의 댓글

GCK루시 작성일

@맬그님 안녕하세요 그레이프시티입니다.


문의 주신 내용에 답변 드립니다.


1. 그리드 정렬을 막는 방법
=> FlexGrid의 allowSorting을 false로 하여 정렬을 막을 수 있습니다. 아래 코드를 참고하여 주시길 바랍니다.
grid.allowSorting = false;

allowSorting : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#allowsorting

2. 그리드 헤더 소문자 변경 문의
=> 문의 주신 내용과 관련하여 그리드의 열 header 속성을 통해 표시하고자 하는 텍스트 그대로 나오기 때문에 소문자로 할당해주셔야 합니다. 아래 코드를 참고하여 주시길 바랍니다.
bindImportedDataIntoModel()
 grid.columns.forEach(col => {
      col.width = "*"
      col.header = col.header.toLowerCase()
 })
   
header : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.column.html#header
도움말 문서도 같이 전달 드리오니 참고 부탁 드립니다.

감사합니다.
그레이프시티 드림

삭제된 댓글의 댓글

맬그 작성일

삭제된 댓글 입니다.

맬그님의 댓글의 댓글

맬그 작성일

제가 질문을 너무 간단하게 드려서 의견 전달이 잘 안 되었던 것 같습니다.  qna 본문에 다시 질문 드렸습니다. 감사합니다
https://dev.grapecity.co.kr/bbs/board.php?bo_table=wijmo_qna&wr_id=313


메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.