FuckingNexacro
database 트랜잭션
트랜잭션 개념 정의
- 데이터그리드 자체적으로 원본데이터를 기억하여 관리/편집되는 데이터를 브라우저 내에서 추적 (브라우저의 범위를 벗어나지 않음)
- 신규 추가된 데이터, 수정된 데이터, 삭제된 데이터, 저장되지 않은 데이터 호출가능, 데이터 유효성 기준 지정가능 및 유효성을 확보하지 못한 경우 저장 차단기능 추가
- 사용을 위해서는 데이터그리드 생성 후
fuckingNexacro.setTransactionEnabled()를 별도로 호출해야합니다.
close 트랜잭션 모드는 매우 실험적인 기능입니다.
최적화가 이루어지지 않아 100 건 만으로도 심각한 성능저하가 발생합니다. 과도한 데이터 호출 시 심각한 응답없음 현상으로도 이어질 수 있습니다.
트랜잭션 관련 기능들은 향후 업데이트를 통한 개선이 아닌 deprecated 처리를 통해 기능이 향후 제외될 수 있습니다.palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.fuckingNexacro.setTransactionEnabled(); // 트랜잭션 모드 활성화, 데이터그리드 생성 후 트랜잭션 기능을 사용하기 위해서는 호출 필요 fuckingNexacro.setTransactionDisabled(); // 트랜잭션 모드를 사용하지 않습니다. 성능적인 이점을 얻습니다. <div id="fuckingNexacro"></div> <script> fuckingNexacro = null; // 본래는 let 또는 const 를 사용해야하나 IDE 가 계속 이미 선언한 변수라고 오류로 인식해요... 크아아악 window.addEventListener("DOMContentLoaded", () => { fuckingNexacro = new FuckingNexacro({ target: document.querySelector("#fuckingNexacro"), props: { column: [ { key: "idx", text: "idx", width: 120, type: "number", fixed: false, format: null }, { key: "id", text: "id", width: 120, type: "string", fixed: false, format: null }, { key: "name", text: "name", width: 160, type: "string", fixed: false, format: null }, { key: "language", text: "language", width: 120, type: "string", fixed: false, format: null }, { key: "bio", text: "bio", width: 240, type: "string", fixed: false, format: null }, { key: "version", text: "version", width: 120, type: "number", fixed: false, format: null } ], data: [], keyColumn: "id", width: "100%", height: 720, rowHeight: 32 } }); fuckingNexacro.setTransactionEnabled(); // 트랜잭션 모드 활성화, 디폴트는 비활성화이기 때문에 따로 호출을 해주셔야 합니다. fetch("https://microsoftedge.github.io/Demos/json-dummy-data/64KB-min.json") .then(res => res.json()) .then(resultList => fuckingNexacro.setDataList(resultList.map((item, index) => { item["idx"] = index; return item; }))); }); </script>
warning 수정된 데이터가 빨간 텍스트로 되는 것은 기본기능이 아닌 CSS 스타일링입니다.
저장되지 않은 데이터에는.fn_row엘리먼트에.fn_row_unsaved클래스가 추가됩니다. 이를 이용하여 빨간 텍스트가 아닌 빨간 셀 등 자유로은 CSS 효과 지정이 가능합니다. 이곳에서.fn_row_unsaved스타일을 확인해주세요.
커밋/롤백
데이터그리드의 관리/편집중인 데이터들의 수정상태를 확정/취소합니다. 백엔드와 전혀 관련없이 데이터그리드 자체적인 영속성 관리 기능이며, 백엔드와의 연동은 개발자가 직접 구현해야 합니다.
palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.warning 트랜잭션 관련 기능은 성능을 기대하기 어렵습니다.
향후 개선 가능성이 없으며 여건에 따라 사용하시되 필요성이 요구되는 경우에는 다른 방법을 검토하시는 것을 진지하게 권고드립니다.<div id="fuckingNexacro"></div> <script> fuckingNexacro = null; // 본래는 let 또는 const 를 사용해야하나 IDE 가 계속 이미 선언한 변수라고 오류로 인식해요... 크아아악 window.addEventListener("DOMContentLoaded", () => { fuckingNexacro = new FuckingNexacro({ target: document.querySelector("#fuckingNexacro"), props: { column: [ { key: "idx", text: "일련번호", width: 100, type: "number", fixed: true, format: null }, { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: null } ], data: [ { "idx": 0, "username": "username000" }, { "idx": 1, "username": "username001" }, { "idx": 2, "username": "username002" }, { "idx": 3, "username": "username003" }, { "idx": 4, "username": "username004" }, { "idx": 5, "username": "username005" }, { "idx": 6, "username": "username006" }, { "idx": 7, "username": "username007" } ], keyColumn: "idx", width: "100%", height: 240, rowHeight: 32 } }); fuckingNexacro.setTransactionEnabled(); // 아래의 메소드를 사용하기 위해서는 트랜잭션 관리 상태를 반드시 활성화하셔야 합니다. 정상적으로 작동하지 않을 경우 개발자도구의 에러를 확인해주세요. fuckingNexacro.getInsertedTempDataList(); // 원본 데이터목록에서 존재하지 않았던 데이터 목록을 배열로 획득합니다. fuckingNexacro.getUpdatedTempDataList(); // 원본 데이터목록에서 존재하되 키-값 형태가 완전히 일치하지 않은 데이터 목록을 배열로 획득합니다. fuckingNexacro.getDeletedTempDataList(); // 원본 데이터목록에 존재하는데 데이터그리드에서 찾을 수 없는 원본 데이터 목록을 배열로 획득합니다. fuckingNexacro.getUnsavedTempDataList(); // 원본 데이터목록과 비교하여 추가/수정/삭제 변동사항이 있는 모든 데이터 목록을 배열로 획득합니다. fuckingNexacro.commit(); // 현재 관리/편집 중인 데이터를 저장합니다. unsaved 체크가 새로 저장된 데이터를 기준으로 이루어지며, 롤백 호출 시 가장 마지막에 커밋된 데이터로 복구됩니다. fuckingNexacro.rollback(); // 현재 관리/편집 중인 데이터를 저장하지 않고 원본으로 데이터들을 복구합니다. if(fuckingNexacro.getUnsavedTempDataList().length > 0 && confirm("저장하시겠습니까?")) {} // 수정된 데이터가 존재할 경우 이렇게 경고를 제공할 수 있습니다. }); </script>
close 데이터가 많을 수록 성능저하가 뚜렷하게 저하됩니다.
해당 기능을 사용하게 될 경우 100건 당 1 페이지 단위로 페이징 처리를 구현하여서 사용하시는 것을 권장합니다.info 데이터 추가 및 삭제는 키보드 insert/delete 키를 통해서도 가능합니다.
버튼으로 만들기 귀찮아서 안내문구 붙임
커밋 검사기
데이터의 유효성 기준을 데이터그리드에 등록합니다. 유효성 기준을 만족하지 못한 데이터가 있을 경우 커밋을 차단합니다.
palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.warning 트랜잭션 관련 기능은 성능을 기대하기 어렵습니다.
향후 개선 가능성이 없으며 여건에 따라 사용하시되 필요성이 요구되는 경우에는 다른 방법을 검토하시는 것을 진지하게 권고드립니다.<div id="fuckingNexacro"></div> <script> fuckingNexacro = null; // 본래는 let 또는 const 를 사용해야하나 IDE 가 계속 이미 선언한 변수라고 오류로 인식해요... 크아아악 window.addEventListener("DOMContentLoaded", () => { fuckingNexacro = new FuckingNexacro({ target: document.querySelector("#fuckingNexacro"), props: { column: [ { key: "idx", text: "일련번호", width: 100, type: "number", fixed: true, format: null }, { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: null } ], data: [ { "idx": 0, "username": "username000" }, { "idx": 1, "username": "username001" }, { "idx": 2, "username": "username002" }, { "idx": 3, "username": "username003" }, { "idx": 4, "username": "username004" }, { "idx": 5, "username": "username005" }, { "idx": 6, "username": "username006" }, { "idx": 7, "username": "username007" } ], keyColumn: "idx", width: "100%", height: 240, rowHeight: 32 } }); fuckingNexacro.setTransactionEnabled(); // 아래의 메소드를 사용하기 위해서는 트랜잭션 관리 상태를 반드시 활성화하셔야 합니다. 정상적으로 작동하지 않을 경우 개발자도구의 에러를 확인해주세요. fuckingNexacro.setCommitValidator(dataItem => dataItem.username?.length > 4); }); </script>
warning 에러처리는if/else가 아닌try/catch를 이용해서 처리하셔야 합니다.
if/else 를 통한 에러처리방법은 지원할 예정이 없습니다.warning 데이터그리드 생성 시 지정한 keyColumn 열을 포함, 읽기전용 열을 커밋 검사기에서 검사하도록 할 경우 커밋이 불가능합니다.
특히 데이터그리드 생성 시 지정한 keyColumn 은 원치않더라도 무조건 읽기전용 속성이 걸리므로 커밋 검사기에 포함되지 않도록 유의바랍니다.warning 기준조건을 만족하지 못하는 데이터의 레코드에 짙은 마젠타 색으로 칠해지는 것은 데이터그리드 기본 스타일이 아닌 CSS 스타일링입니다.
검사기 기준조건을 만족하지 못하는 데이터에는.fn_row엘리먼트에.fn_row_invalid클래스가 추가됩니다. 이곳에서.fn_row_invalid스타일을 확인해주세요.
유효하지 않은 데이터 일괄삭제
커밋 검사기가 등록된 상태에서 기준조건을 충족하지 못하는 모든 데이터를 일괄 삭제합니다.
palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.warning 트랜잭션 관련 기능은 성능을 기대하기 어렵습니다.
향후 개선 가능성이 없으며 여건에 따라 사용하시되 필요성이 요구되는 경우에는 다른 방법을 검토하시는 것을 진지하게 권고드립니다.<div id="fuckingNexacro"></div> <script> fuckingNexacro = null; // 본래는 let 또는 const 를 사용해야하나 IDE 가 계속 이미 선언한 변수라고 오류로 인식해요... 크아아악 window.addEventListener("DOMContentLoaded", () => { fuckingNexacro = new FuckingNexacro({ target: document.querySelector("#fuckingNexacro"), props: { column: [ { key: "idx", text: "일련번호", width: 100, type: "number", fixed: true, format: null }, { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: null } ], data: [ { "idx": 0, "username": "username" }, { "idx": 1, "username": "usernam" }, { "idx": 2, "username": "userna" }, { "idx": 3, "username": "usern" }, { "idx": 4, "username": "user" }, { "idx": 5, "username": "use" }, { "idx": 6, "username": "us" }, { "idx": 7, "username": "u" } ], keyColumn: "idx", width: "100%", height: 240, rowHeight: 32 } }); fuckingNexacro.setTransactionEnabled(); // 아래의 메소드를 사용하기 위해서는 트랜잭션 관리 상태를 반드시 활성화하셔야 합니다. 정상적으로 작동하지 않을 경우 개발자도구의 에러를 확인해주세요. fuckingNexacro.setCommitValidator(dataItem => dataItem.username?.length > 4); fuckingNexacro.deleteInvalidAllDataList(); // 기준조건(username 길이 > 4)을 충족하지 못하는 모든 데이터 일괄삭제 }); </script>
warning 트랜잭션 모드가 비활성화 상태일 경우에는 아무런 효과 없이 종료됩니다.
개발자 도구에서도 에러를 표시하지 않으므로 유의바랍니다.warning 데이터그리드 생성 시 지정한 keyColumn 열을 포함, 읽기전용 열을 커밋 검사기에서 검사하도록 할 경우 의도치 않은 데이터가 삭제될 수 있습니다.
특히 데이터그리드 생성 시 지정한 keyColumn 은 원치않더라도 무조건 읽기전용 속성이 걸리므로 커밋 검사기에서 기준조건으로 판단되지 않도록 유의바랍니다.