wijmo 그리드 사용법 & tip

wijmo(위즈모) 그리드 사용법 & tip 정리

위즈모(wijmo) 그리드를 사용하면서 삽질 해가면서 얻은 tip들을 정리한 내용입니다.

두서가 없을 수 있습니다.

1. 헤더타이틀 줄바꿈 : 여러가지의 방법이 있겠으나 <br> 사용하는 방법은 excel export했을때 그대로 태그가 노출되는 문제가 있습니다.

-> wordWrap:true, multiLine:true 를 사용하고 \n를 사용하면 excel 출력시에 태그가 노출되지 않습니다.

그리고 제일 밑에 theGrid.autoSizeRow(0, true);를 선언해 줍니다.

예) 

theGrid = new wijmo.grid.FlexGrid('#theGrid', {

headersVisibility: 'Column',

itemsSource: view,

imeEnabled: true,

autoGenerateColumns: false,

/* show HTML in column headers */

formatItem: function(s, e) {

if (e.panel == s.columnHeaders) {

e.cell.innerHTML = e.cell.textContent;

// var html = e.cell.innerHTML;

// e.cell.innerHTML = '<div style="text-align:center;">' + html + '</div>';

}

},

columns: [

{ binding: 'rowNum', header: '순번', width: 80, isReadOnly: true},

{ binding: 'title', header: '헤더타이틀명\n줄바꿈이되나요', wordWrap:true, multiLine:true, minWidth: 120..},  <-----이부분임

{}..

]

});

theGrid.autoSizeRow(0, true); <---이부분도 선언해야함.

개발자포럼이나 tip들 보면 width를 '*'이렇게 설정하라고 되어있다. minWidth를 설정해주어 cell의 폭을 넉넉히 가져가는게 좋아 보인다.

2. 헤더타이틀에 style을 부여하고 싶을때

-> e.cell.innerHTML = '<div style="text-align:center;">' + html + '</div>';

예) 

autoGenerateColumns: false, //재 조회했을때 true로 되어있으면 옆으로 컬럼이 더 붙는다.

formatItem: function(s, e) {

if (e.panel == s.columnHeaders) {

// e.cell.innerHTML = e.cell.textContent; //컨텐츠를 모두 중앙정렬함.(+, ㅡ로 접는 토글방식이면 접는아이콘도 하나의 문장으로 보고타이틀과함께 한줄로 중앙정렬됨)

var html = e.cell.innerHTML;

e.cell.innerHTML = '<div style="text-align:center;">' + html + '</div>'; //텍스트만 중앙정렬함 (+, ㅡ 토글버튼은 위로 타이틀은 밑으로 중앙정렬됨)

}

},columns: [ ...

3. 처음 조회 후 재조회 시 

theGrid = new wijmo.grid.FlexGrid('#theGrid', {... 부분에서 theGrid 를 글로벌 변수로 두고 재조회 한 데이터를

theGrid.itemsSource = view; 이런식으로 넣어주면됨. 물론 view변수도 글로벌 변수로 선언하여 새로받아온 데이터를 view변수에 넣어줘야한다.

4. 재조회후 헤더영역이 동적으로 변경되게 하려면

2021년 5월 이라는 헤더가 있다면 2021년 6월 조회 후 해당 헤더 cell의 타이틀도 변경하고 싶다면

theGrid.columns.find(i => i.binding == 'yearTitleName').header = '연도별어쩌구저쩌구\n('+searchMonth+'월까지 누계)'; 이렇게 넣어주면 됨.

* theGrid는 new wijmo.grid.FlexGrid('#theGrid', {.... 를 선언할때 대입한 변수이다. (theGrid = new wijmo.grid.FlexGrid('#theGrid', {.....)

* searchMonth는 검색에 사용한 변수이다. (var searchMonth = $('#searchMonth').val();)

5. 한글을 cell에 입력시 처음 글자의 자음이 영어로 입력되는경우

imeEnabled: true 를 선언하면 된다.

예)

theGrid = new wijmo.grid.FlexGrid('#theGrid', {

headersVisibility: 'Column',

itemsSource: view,

imeEnabled: true,  <---이부분이다.

autoGenerateColumns: false,