본문 바로가기
728x90

jqGrid4

jqGrid - 그리드 내부 스크롤 시 그리드 컬럼 show/hide 안녕하세요. 오늘도 현업에서 제가 구현했던 기능을 소개하려고 합니다. 그리드 내부를 스크롤할 시 그리드 컬럼이 show/hide되는 재미있는 기능입니다. 먼저 스크린샷 이미지로 어떤 기능인지 살펴보겠습니다. 위 스크린샷 이미지에서 볼 수 있듯이 가로 스크롤을 옵션명까지 이동하면 그 앞에 있는 컬럼들이 hide됩니다. 그리고 더보기 버튼이 생기는 것을 볼 수 있습니다. 더보기 행을 클릭하면 다시 hide된 컬럼들이 show가 됩니다. 가로 스크롤을 하면 체크박스를 볼 수가 없기에 체크박스를 유지하는 방법의 일환으로 해당 기능을 개발하게 되었습니다. 여담으로 그리드의 frozen 기능이 있는데 frozen은 앞에 있는 행부터 하나씩 고정하는 기능입니다. frozen으로도 체크박스를 유지할 수 있기에, 지금 .. 2021. 6. 16.
jqGrid - 그리드 셀 병합(cellattr 속성 사용) 1. 그리드 셀 병합이란 엑셀 셀 병합과 같이 그리드 내부의 셀들을 병합할 수 있다. colModel의 cellattr 속성을 이용하여 구현가능하며, colspan키워드는 가로 셀을 병합하고 rowspan키워드는 세로 셀을 병합한다. 2. cellattr 속성 인자 분석 $("#gridId").jqGrid( ... // width : 100, autowidth : true, shrinkToFit : true, ... colModel : [ {name: 'test', index: 'test', label: '테스트', width: 20, align: center, cellattr: function(rowId, tv, rowObject, cm, rdata) { // testCode값이 01라면 현재 Colu.. 2021. 4. 19.
jqGrid - 그리드 헤더 병합(groupHeader) 1. 그룹 해더 정의 그룹 헤더는 아래의 그림과 같이 colHeader 위에 컬럼 헤더 위에 row를 추가해 복수의 colHeader를 그룹해서 명명하는 방식이다. 2. 제한 사항 - 정렬 가능한 컬럼은 그룹화와 호환되지 않으며, 둘개의 기능을 동시에 사용할 수 없다. - 컬럼 선택자는 헤더그룹과 호환되지 않는다. - addRowData나 delRowData와 같은 grid에 row를 추가하거나 삭제하는 경우, 헤더그룹과 호환이 어렵다. - 그리드를 그린 이후에 헤더그룹을 추가할 경우, 헤더 그룹에는 css가 적용되지 않을 수가 있다. - 그리드를 그린 이후에 그리드 너비(resize)를 조정할 경우 헤더 그룹의 너비가 올바르게 적용되지 않는다. 3. 그룹 해더 사용 jQuery("#grid").jqGr.. 2021. 4. 16.
jqGrid - 그리드 너비 설정 및 스크롤바 추가 1. 그리드 너비 설정 방법 그리드 너비를 임의로 설정하고 싶은 경우에는 width 값에 원하는 너비값(px)을 입력하면 됩니다. 하지만 너비 값을 화면의 크기에 맞게 자동으로 조정하고 싶으면 autowidth를 true로 주면 됩니다. 각 컬럼들이 그리드의 width에 맞게 컬럼헤드 너비가 자동으로 조절되게 하기 위해서는 shrinkToFit을 true로 주면 됩니다. $("#gridId").jqGrid( ... // width : 100, autowidth : true, shrinkToFit : true, ... colModel : [ {name: 'test', index: 'test', label: '테스트', width: 20, align: center}, ... ], ... ); 2. 그리드에 .. 2021. 4. 15.
728x90

티스토리툴바