wijmo 그리드 사용법 & tip
IT&프로그래밍 2021. 1. 23. 16:20
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,
'IT&프로그래밍' 카테고리의 다른 글
DataTables (그리드) 사용팁 정리 (0) | 2021.12.13 |
---|---|
Intellij(인텔리제이) 콘솔에서 Mybatis 한글 깨짐 해결방법 (0) | 2021.12.04 |
Intellij IDEA 2020.1.2 버전 다운로드 (0) | 2020.12.14 |
svn: error: The subversion command line tools are no longer provided by Xcode. 발생시 (0) | 2020.08.06 |
자바 - 문자열의 원하는 byte만큼 자르기 (0) | 2019.09.19 |