FuckingNexacro Demo

FuckingNexacro

hearing 데이터 이벤트

데이터 변경 감지하기

관리/편집 중인 데이터그리드에서 데이터의 수정이 발생한 경우 수정된 데이터를 넘겨받는 콜백함수를 실행하도록 할 수 있습니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.
fuckingNexacro.setOnDataChange(dataItem => { return 값이 존재하지 않는 콜백함수 });
<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: value => value }, 
                    { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: value => value }
                ], 
                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.setOnDataChange(dataItem => alert(JSON.stringify(dataItem))); // 데이터 수정 발생 및 편집 종료 시 얼럿을 띄우기
        fuckingNexacro.setOnDataChange(null); // 이벤트 삭제
    });
</script>
info 데이터 편집 종료 시 반응합니다.
데이터를 직접 편집해보세요. 수정이 종료되는 즉시 바로 실행됩니다.

warning 트랜잭션 모드에 상관없이 사용 가능하며, 이에 따라 데이터의 수정 전 상태를 확인할 수 없습니다.
따라서 원본으로 회복/롤백하기 위한 용도로는 사용할 수 없으며, 호출시점 또한 편집이 종료된 이후이기 때문에 편집을 막는 콜백으로써 사용할 수 없습니다.

데이터 복사 감지하기

단건 데이터 또는 Shift+클릭이나 Ctrl+클릭 등을 통해 다수의 데이터가 선택된 상태에서 Ctrl+C 복사를 시도했을 때 호출될 이벤트를 등록합니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.
fuckingNexacro.setOnDataCopy((columnList, selectedDataList) => { return true/false; 로 마무리되는 콜백 함수 });
fuckingNexacro.setOnDataCopy(() => false); // 데이터 복사 차단
<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: value => value }, 
                    { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: value => value }
                ], 
                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.setOnDataCopy((columnList, selectedDataList) => {
            console.log("columnList: ", columnList);
            console.log("selectedDataList: ", selectedDataList);
        });
    });
</script>
info Ctrl+C 입력 시 반응합니다. 개발자도구 콘솔을 통해 결과를 확인해주세요.
데이터 클릭, Ctrl+클릭, Shift+클릭 등으로 단건 및 다수건 데이터를 선택한 다음 Ctrl+C 를 통해 데이터를 복사해보세요.

데이터 붙여넣기 감지하기

클립보드의 데이터를 데이터그리드에 붙여넣을 때 호출될 이벤트를 등록합니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.
fuckingNexacro.setOnDataPaste(dataList => { return true/false; 로 마무리되는 콜백 함수 });
<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: value => value }, 
                    { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: value => value }
                ], 
                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.setOnDataPaste(dataList => {
            alert(JSON.stringify(dataList));
            return true;
        });
        fuckingNexacro.setOnDataPaste(dataList => false); // 클립보드 데이터 붙여넣기 찾단
        fuckingNexacro.setOnDataPaste(null) // 이벤트 제거
    });
</script>
info Ctrl+V 입력 시 반응합니다.
데이터그리드의 데이터를 일시적으로 엑셀에 붙여넣은 후, 엑셀의 데이터를 복사하여 데이터그리드에 붙여넣어보세요.

데이터 선택 감지하기

선택된 데이터가 바뀔 때마다 호출될 콜백함수를 등록합니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.
fuckingNexacro.setOnDataSelect(dataList => { return 값이 존재하지 않는 콜백함수 });
fuckingNexacro.setOnDataSelect(null); // 이벤트 제거
<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: value => value }, 
                    { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: value => value }
                ], 
                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.setOnDataSelect(dataList => console.log("setOnDataSelect: ", dataList));
        fuckingNexacro.setOnDataSelect(null) // 이벤트 제거
    });
</script>
info 데이터를 선택할 때 마다 반응합니다. 어떤 데이터를 선택했는지 가리지 않고 무조건 호출됩니다.
개발자도구 콘솔을 통해 확인해주세요.

데이터 체크 감지하기

체크된 데이터가 바뀔 때마다 호출될 콜백함수를 등록합니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.
fuckingNexacro.setOnDataCheck(dataList => { return 값이 존재하지 않는 콜백함수 });
fuckingNexacro.setOnDataCheck(null); // 이벤트 제거
<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: value => value }, 
                    { key: "username", text: "사용자명", width: 160, type: "string", fixed: false, format: value => value }
                ], 
                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.setOnDataCheck(dataList => console.log("setOnDataCheck: ", dataList));
        fuckingNexacro.setOnDataCheck(null) // 이벤트 제거
    });
</script>
info 데이터를 체크할 때 마다 반응합니다. 어떤 데이터를 체크했는지 가리지 않고 무조건 호출됩니다.
개발자도구 콘솔을 통해 확인해주세요.