[넥사크로, Nexacro 14] 그리드 값 수정 여부 표시
Laptop
유효성이 중요한 데이터를 다루던 중 데이터 수정 및 신규 여부를 화면에 나타내야 해서 만든 기능이다.
넥사크로의 Grid에는 ROWTYPE이라는 값 수정 여부를 인식하는 속성이 있지만 값이 변경되는 시점이 edit 컴포넌트마다 달라서 이벤트를 다르게 써야 한다.
TEXT에서 입력 취소 기능(타이핑 도중 포커스 아웃하면 값 복원)은 편의상 넣었는데 이것도 역시 key 이벤트 타이밍을 잘 고려해야 한다.
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <?xml version="1.0" encoding="utf-8"?> <FDL version="1.5"> <TypeDefinition url="..\default_typedef.xml"/> <Form id="test" left="0" top="0" width="500" height="300" titletext="New Form" onload="test_onload"> <Layouts> <Layout> <Grid id="Grid00" taborder="0" binddataset="dsGrid" autofittype="col" onkeydown="Grid00_onkeydown" onkeyup="Grid00_onkeyup" onselectchanged="Grid00_onselectchanged" oncloseup="Grid00_oncloseup" ontextchanged="Grid00_ontextchanged" left="75" top="68" width="350" height="100"> <Formats> <Format id="default"> <Columns> <Column size="40"/> <Column size="100"/> <Column size="80"/> <Column size="60"/> </Columns> <Rows> <Row size="24" band="head"/> <Row size="24"/> </Rows> <Band id="head"> <Cell text="GBN"/> <Cell col="1" text="TEXT"/> <Cell col="2" text="DATE"/> <Cell col="3" text="COMBO"/> </Band> <Band id="body"> <Cell style="align:center;color:red;color2:red;selectcolor:red;" text="bind:GBN"/> <Cell col="1" edittype="text" style="align:center;" text="bind:TEXT"/> <Cell col="2" displaytype="date" edittype="date" style="align:center;" text="bind:DATE"/> <Cell col="3" displaytype="combo" edittype="combo" style="align:center;" text="bind:COMBO" combodataset="dsCombo" combocodecol="CODE" combodatacol="VALUE"/> </Band> </Format> </Formats> </Grid> <Button id="btnAdd" taborder="1" text="ADD" onclick="btnAdd_onclick" left="140" top="183" width="60" height="30"/> <Button id="btnReset" taborder="2" text="RESET" onclick="btnReset_onclick" left="220" top="183" width="60" height="30"/> <Button id="btnSave" taborder="3" text="SAVE" onclick="btnSave_onclick" left="300" top="183" width="60" height="30"/> </Layout> </Layouts> <Objects> <Dataset id="dsGridCopy"/> <Dataset id="dsGrid"> <ColumnInfo> <Column id="GBN" size="1" prop="default" type="STRING"/> <Column id="TEXT" size="10" prop="default" type="STRING"/> <Column id="DATE" prop="default" type="STRING"/> <Column id="COMBO" prop="default" type="INT"/> </ColumnInfo> <Rows> <Row> <Col id="GBN"/> <Col id="TEXT">TEST</Col> <Col id="DATE">20220101</Col> <Col id="COMBO">1</Col> </Row> </Rows> </Dataset> <Dataset id="dsCombo"> <ColumnInfo> <Column id="CODE" prop="default" type="INT"/> <Column id="VALUE" size="10" prop="default" type="STRING"/> </ColumnInfo> <Rows> <Row> <Col id="CODE">1</Col> <Col id="VALUE">1</Col> </Row> <Row> <Col id="CODE">2</Col> <Col id="VALUE">2</Col> </Row> <Row> <Col id="CODE">3</Col> <Col id="VALUE">3</Col> </Row> </Rows> </Dataset> </Objects> </Form> </FDL> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | this.isInput = false; // 입력 중 상태 여부 this.inputBackup = ''; // 입력하기 전 값 백업 this.test_onload = function(obj:Form, e:nexacro.LoadEventInfo) { this.dsGridCopy.copyData(this.dsGrid); // 초기 데이터 백업 } this.Grid00_ontextchanged = function(obj:Grid, e:nexacro.GridEditTextChangedEventInfo) { // 수정 전 값 백업 if (!this.isInput) { this.inputBackup = e.pretext; } if (this.dsGrid.getColumn(e.row, "GBN") != 'C') { this.isInput = true; this.dsGrid.setColumn(e.row, "GBN", 'U'); } } this.Grid00_onkeyup = function(obj:Grid, e:nexacro.KeyEventInfo) { var col = obj.getCellProperty("Body", obj.currentcol, "text").split(':')[1]; // 컬럼명 // Enter 눌러서 입력 완료 후 ROWTYPE 상태에 따라 GBN 표시 (U: 수정, C: 신규) if (this.isInput && e.keycode == nexacro.Event.KEY_ENTER) { this.isInput = false; this.dsGrid.setColumn(obj.currentrow, "GBN", ''); if (this.dsGrid.getRowType(obj.currentrow) == Dataset.ROWTYPE_UPDATE) { this.dsGrid.setColumn(obj.currentrow, "GBN", 'U'); } } } this.Grid00_onkeydown = function(obj:Grid, e:nexacro.KeyEventInfo) { if(e.keycode == nexacro.Event.KEY_ESC) { // 입력 도중 ESC 누를 경우 // 포커스 해제 obj.set_enable(false); obj.set_enable(true); var col = obj.getCellProperty("Body", obj.currentcol, "text").split(':')[1]; if (this.isInput) { // 수정 전 값으로 복구 this.dsGrid.setColumn(obj.currentrow, col, this.inputBackup); this.dsGrid.setColumn(obj.currentrow, "GBN", ''); if (this.dsGrid.getRowType(obj.currentrow) == Dataset.ROWTYPE_UPDATE) { this.dsGrid.setColumn(obj.currentrow, "GBN", 'U'); } } this.isInput = false; } } this.Grid00_onselectchanged = function(obj:Grid, e:nexacro.GridSelectEventInfo) { // 다른 row를 선택했을 경우 (입력 종료로 간주) var col = obj.getCellProperty("Body", e.cell, "text").split(':')[1]; if (this.isInput && obj.getCellValue(e.oldrow, e.oldcol) == this.dsGridCopy.getColumn(e.oldrow, e.oldcol)) this.dsGrid.setColumn(e.oldrow, "GBN", 0); this.isInput = false; } this.Grid00_oncloseup = function(obj:Grid, e:nexacro.GridEditEventInfo) { // 날짜, 콤보박스 선택 후 var col = obj.getCellProperty("Body", e.cell, "text").split(':')[1]; this.dsGrid.setColumn(e.row, "GBN", ''); if (this.dsGrid.getRowType(e.row) == Dataset.ROWTYPE_UPDATE || (e.value != this.dsGridCopy.getColumn(e.row, col) && this.dsGrid.getColumn(e.row, "GBN") != 'C') ) { this.dsGrid.setColumn(e.row, "GBN", 'U'); } } this.btnAdd_onclick = function(obj:Button, e:nexacro.ClickEventInfo) { // 신규 데이터 추가 var row = this.dsGrid.addRow(); this.dsGrid.setColumn(row, 'GBN', 'C'); } this.btnReset_onclick = function(obj:Button, e:nexacro.ClickEventInfo) { // 초기화 this.dsGrid.reset(); } this.btnSave_onclick = function(obj:Button, e:nexacro.ClickEventInfo) { // 저장 (전체 GBN ''로 설정 후 Dataset 적용 및 Copy 재처리) for (var i=0; i < this.dsGrid.getRowCount(); i++) { this.dsGrid.setColumn(i, "GBN", ''); } this.dsGrid.applyChange(); this.dsGridCopy.copyData(this.dsGrid); } |