넥사크로(Nexacro)를 배우다 보면,
가장 많이 활용하게 되는 컴포넌트 중 하나가 Grid와 Dataset입니다.
Grid는 데이터를 효율적으로 표시하고 조작할 수 있어,
다양한 기능을 익혀 두면 더욱 편리하게 사용할 수 있습니다.
이 포스트에서는 넥사크로에서 자주 사용하는
Grid의 유용한 기능과 활용법을 정리해 보았습니다.
(1) 그리드 컬럼(Grid Column) 숨기기 - width(폭) 값을 0px로 만들어서 보이지 않게 함.
(2) 컬럼 커서(Column Cursor) 마우스 올렸을 때 변경하기
(3) 컬럼(Column) 표시값에 %붙이기 - (예: 11.16%처럼 표시)
(4) 컬럼 No(카운트 번호) 붙이기 + 선택된 row 개수 + 전체 row 개수
(5) 선택된 체크박스(Checkbox) 합산 구하기 + 전체 합산 구하기
(6) 자릿수 콤마 표시 - (예: 1,992.27)
(7) 소수점 연산(합산, 곱셈)시 오류 방지 - Javascript 소수점 오류 방지
(8) 자주 사용되는 Scrip를 이용한 Grid 기능 활용 방법들
(1) 그리드 컬럼(Grid Column) 숨기기
setFormatColProperty
- width(폭) 값을 0px로 만들어서 보이지 않게 함.
Grid 컬럼을 토글 형식으로 숨기거나 보이게 하는 기능을 구현하려면,
JavaScript와 해당 UI 프레임워크(Grid 컴포넌트)를 활용하면 됩니다.
Grid 컬럼을 숨기거나 보이게 하는 기능은
폼(form)의 onload 이벤트에서 자동으로 설정하면 더욱 유용하게 활용할 수 있습니다.
예를 들어, 특정 조건에 따라 초기 화면에서 특정 컬럼을 숨기거나,
필요할 때 다시 표시하도록 설정할 수 있습니다.
숨기고 싶은 컬럼의 컬럼의 번호(col9)인 9를 입력합니다.
// [컬럼 숨기기] hidden column (grd_header 그리드명(Grid id))
// (9,"size",0) 컬럼번호=9, width size=0
this.div_splitTop.form.grd_header.setFormatColProperty(9,"size",0);
(2) 컬럼 커서(Column Cursor) 마우스 올렸을 때 변경하기
coursor
- Grid 컬럼에 Mouse Over상태의 표시 변경
그리드(Grid)에 특정 컬럼에 마우스를 올렸을 때,
마우스 모양을 변경하게 하는 설정값입니다.
가장 많이 사용 링크표시는 단연 "손 모양" => pointer
(3) 컬럼(Column) 표시값에 % 붙이기
maskeditpostfixtext
- 값 뒤에 퍼센트 표시 (예: 11.16%)
Grid의 결과 값에서 CellMaskEdit을 활용하여
특정 값의 마지막에 %를 표시하려면,
원하는 body 영역에서 col19 컬럼을 선택한 후,
해당 컬럼의 속성 중 display 값을 "mark"로 설정해야 합니다.
(이 값이 다르면 정상적으로 적용되지 않을 수 있습니다.)
마지막으로, CellMaskEdit의 그룹 속성 중
maskeditpostfixtext 속성에 값을 설정하면,
입력된 숫자 뒤에 원하는 문자를 표시할 수 있습니다.
예를 들어,
해당 속성에 "%"를 입력하면 숫자 뒤에 자동으로 퍼센트 기호가 추가됩니다.
(4) 컬럼 No(카운트 번호) 붙이기 + 선택된 row 개수 + 전체 row 개수
expr: currow + 1
- 줄 번호(No) 붙이기
dataset.getCaseCount(컬럼값 비교연산)
- 선택된 Check Rows의 카운트
Grid에서 선택된 행(Row)의 개수를 표시하려면,
체크박스(bind:CHK) 값에 따라 개수를 계산하면 됩니다.
이를 위해 dataset.getCaseCount(컬럼값 비교연산)을 사용하면,
해당 컬럼의 값이 true일 때마다 개수가 추가되어
손쉽게 선택된 행의 수를 확인할 수 있습니다.
expr:"Selected row count: "+dataset.getCaseCount("CHK==1")
dataset.getRowCount()
- 전체 로우(row) 개수 구하기
Grid에서 전체 행(row) 수와
체크박스로 선택된 행 수를 함께 표시하려면,
아래와 같이
dataset.getRowCount()와
dataset.getCaseCount(컬럼값 비교연산)을
활용하면 됩니다.
dataset.getRowCount() → 전체 행(row)의 개수를 가져옴
dataset.getCaseCount("CHK == 1") → 체크박스(CHK 값이 true 또는 1인 경우) 선택된 행 수 계산
expr: "Total: "+dataset.getCaseCount("CHK==1") +" / "+dataset.getRowCount()
(5) 선택된 체크박스(Checkbox) 합산 구하기 + 전체 합산 구하기
dataset.getCaseSum(조건, 연산식)
- 체크된 row의 값의 합산 구하기
nexacro.round(값, 자릿수)는 주어진 값을 지정된 자릿수에 맞게 반올림 처리해주는 함수입니다.
이 함수는 숫자를 원하는 소수점 자릿수까지 반올림하여, 정확한 값을 다룰 수 있게 도와줍니다.
예를 들어, nexacro.round(3.14159, 2)를 사용하면, 값이 3.14로 반올림됩니다.
이렇게 활용하면 수학적인 계산이나 표시되는 값의 정확도를 쉽게 조정할 수 있어 유용합니다.
expr:nexacro.round(dataset.getCaseSum("CHK==1", "parseFloat(grs_wt)"), 2)
- 전체 row의 값의 합산 구하기
parserFloat(컬럼명)은 해당 컬럼의 값을 Float형으로 변환하는 함수입니다.
이를 활용하면 문자열로 된 숫자를 실수형 숫자값으로 정확하게 처리할 수 있습니다.
예를 들어, parserFloat(grs_wt)를 사용하면
grs_wt 컬럼의 값을 실수형으로 변환하여 사용할 수 있습니다.
또한, dataset.getSum('parseFloat(grs_wt)')와 같이 사용하면,
grs_wt 컬럼의 값을 실수형으로 변환한 후 합산할 수 있습니다.
이렇게 하면 데이터 계산 시,
타입에 구애받지 않고 정확한 실수 연산을 할 수 있어
더욱 신뢰할 수 있는 결과를 얻을 수 있습니다.
nexacro.round(dataset.getSum("parseFloat(grs_wt)"),1)
(6) 자릿수 콤마 표시
#,###0.#0
- (예: 1,992.27)
숫자형 데이터에서 천의 자릿수마다 콤마(,)를 넣고,
소수점 자릿수를 설정하는 것은
정확하고 보기 좋은 숫자 표현을 위해 자주 사용되는 기능입니다.
이를 통해 데이터가 더 직관적으로 보이고,
사용자가 쉽게 읽을 수 있습니다.
여기서, "#,###.#0"과 "#,##0,#0" 포맷은
숫자 표시 방식에서 약간의 차이를 보입니다.
이 차이로 인해 초기 입력 전에 나타나는 0의 자릿수가 다르게 표시될 수 있습니다.
"#,###.#0" 표시 결과
"#,##0.#0" 표시 결과
(7) 소수점 연산(합산, 곱셈) 시 오류 방지
- Javascript 소수점 오류 방지
JavaScript에서 자주 발생하는 소수점 연산 오류는
사실 컴퓨터가 실수를 이진법으로 표현할 때 발생하는 정밀도 문제 때문입니다.
이 문제를 해결하는 방법 중 하나로,
특정 소수점 자릿수에 대한 연산을 곱셈을 통해 처리하는 방식이 있습니다.
(7.1) 특정 소수점의 경우 곱하기 이용
예를 들어, 소수점 2자리에서 연산을 처리할 때는
다음과 같은 방법으로 해결할 수 있습니다:
=> 소수점 연산을 하기 전에 100을 곱한 후 계산을 진행하고,
그 결과를 다시 100으로 나누어 원하는 결과를 얻는 방식입니다.
예시: 소수점 두 자리를 곱하는 연산을 할 때,
아래와 같이 100을 곱하고 나서 다시 나누는 방법을 사용할 수 있습니다.
let num1 = 0.1;
let num2 = 0.2;
// 100을 곱하고 계산한 후 다시 100으로 나눔
let result = (num1 * 100 + num2 * 100) / 100;
console.log(result); // 0.3
넥사크로에서 사용하는 예제는 다음과 같습니다.
Math.round((dataset.getSum('parseFloat(tot_cost_amt)')*100)+(dataset.getSum('parseFloat(op_cost_amt)')*100))/100
또 다른 방법은 toFixed() 메서드를 활용하는 방식입니다.
이 방법은 소수점 자릿수를 고정하여
연산 결과의 정확성을 높여주는 유용한 방법입니다.
(7.2) toFixed() 메서드 이용
toFixed() 메서드는 숫자를
지정된 소수점 자릿수로 반올림하여 문자열로 반환합니다.
따라서, 소수점 오류를 방지하고 원하는 자릿수로 결과를 처리할 수 있습니다.
let result = (0.1 + 0.2).toFixed(2);
console.log(result); // 0.3
// '0.30' Number(result);
// 0.3
(8) 자주 사용되는 Scrip를 이용한 Grid 기능 활용 방법들
(8.1) 컬럼 너비 자동 조절
(Grid 속성값 autofittype:col를 이용해서도 사용가능)
Grid의 영역에 컬럼을 다 붙여주는 것을 의미합니다.
this.Grid00.autofitcol("all");
Grid속성의 autofittype: col로 되었을 때, autofitcol("all")과 같이 붙여줍니다.
(8.2) 행 추가 및 삭제
Grid의 로우(row=행) 추가 및 삭제
this.Dataset00.addRow(); // 행 추가
this.Dataset00.deleteRow(0); // 첫 번째 행 삭제
(8.3) 선택한 행(row) 가져오기
선택한 로우(row)의 컬럼 값을 가져오기
var row = this.Grid00.getSelectedRow();
var value = this.Dataset00.getColumn(row, "Name");
alert("선택된 이름: " + value);
(8.4) 키보드 이벤트 처리
키보드 키 감지하여 특정 동작을 수행할 수 있습니다.
this.Grid00.addEventHandler("onkeydown", function(obj, e) {
if (e.keycode == 13) { // Enter 키
var row = obj.getSelectedRow();
alert("선택된 행: " + row);
}
}, this);
넥사크로(Nexacro)를 처음 접하면서,
체계적으로 정리된 정보의 필요성을 느껴 오랫동안 준비해 왔는데요.
이제야 이렇게 공유하게 되었습니다. 😊
이 글이 도움이 되셨다면,
따뜻한 반응(하트나 댓글)으로 소통해 주세요!
여러분의 관심과 응원이 큰 힘이 되어
앞으로도 계속해서 유용한 정보를 나누도록 하겠습니다.
감사합니다! 🙌✨
(로그인하지 않으셔도 가능)