FuckingNexacro Demo

FuckingNexacro

play_arrow 기본형

기본형 생성하기

단순한 데이터를 보여주는 예시입니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.
<script>
    new FuckingNexacro(target, props);
    // target 과 props 는 생성자 호출(new FuckingNexacro(...)) 이전에 미리 정의되어있어야 합니다.
    // 해당 블록에서는 설명을 돕기 위해 생성자 다음에 기재합니다.
    
    target = document.querySelector("#fuckingNexacro"); // 데이터그리드를 배치하기 위한 단일 엘리먼트
    props = { column, data, keyColumn, width, height, rowHeight, button? }; // 데이터그리드의 특성을 부여하는 프로퍼티 객체
</script>

<div id="fuckingNexacro"></div>

<script src="준비된_번들_js파일"></script>
<script>
    let fuckingNexacro;

    window.addEventListener("DOMContentLoaded", () => {
        fuckingNexacro = new FuckingNexacro({
            target: document.querySelector("#fuckingNexacro"), 
            props: {
                column: [
                    { key: "idx", text: "일련번호", width: 80, type: "number", fixed: true, format: null }, 
                    { key: "username", text: "사용자명", width: 200, type: "string", fixed: false, format: null }
                ], 
                data: [
                    { idx: 0, username: "username000" }, 
                    { idx: 1, username: "username001" }, 
                    { idx: 2, username: "username010" }, 
                    { idx: 3, username: "username011" }, 
                    { idx: 4, username: "" }, 
                    { idx: 5, username: "username101" }, 
                    { idx: 6, username: "username110" }, 
                    { idx: 7, username: "username111" } 
                ], 
                keyColumn: "idx", 
                width: "100%", 
                height: 200, 
                rowHeight: 32
            }
        });
    });
</script>
warning 반드시 window.addEventListener("DOMContentLoaded") 이후에 호출되어야 합니다.
정체를 알 수 없는 ctx 관련 콘솔 오류가 발생하시는 경우 window.addEventListener("DOMContentLoaded") 이후에 제대로 호출되도록 등록되어있는지 확인해주세요.

warning 반드시 keyColumn 은 column 배열 중 존재하는 열의 key 값이어야 합니다.
keyColumn 이 지정되지 않으면 데이터그리드를 생성하지 않습니다. 이는 기술적 한계가 아닌 개발방침입니다.

읽기전용/쓰기모드 설정

데이터 수정이 일체 불가능한 읽기전용 설정입니다. 읽기전용 상태더라도 얼마든지 쓰기모드로 변경/재변경 할 수 있습니다.

close 데이터 수정 과는 다른 읽기전용입니다. 이 페이지에서의 읽기전용은 데이터그리드 자체를 읽기전용으로 만드는 방법입니다.
또한, 셀의 더블클릭을 통한 수정기능이 모든 열에서 막히며, 데이터의 수정을 유도하는 모든 메소드 또한 차단됩니다.
fuckingNexacro.setReadonly(); // 데이터그리드 자체를 읽기전용으로 설정
fuckingNexacro.setEditable(); // 데이터그리드를 쓰기모드로 변경

<div id="fuckingNexacro"></div>

<script src="준비된_번들_js파일"></script>
<script>
    window.addEventListener("DOMContentLoaded", () => {
        fuckingNexacro = new FuckingNexacro({
            target: document.querySelector("#fuckingNexacro"), 
            props: {
                column: [
                    { key: "idx", text: "일련번호", width: 80, type: "number", fixed: true, format: null }, 
                    { key: "username", text: "사용자명", width: 200, type: "string", fixed: false, format: null }
                ], 
                data: [
                    { idx: 0, username: "username000" }, 
                    { idx: 1, username: "username001" }, 
                    { idx: 2, username: "username010" }, 
                    { idx: 3, username: "username011" }, 
                    { idx: 4, username: "" }, 
                    { idx: 5, username: "username101" }, 
                    { idx: 6, username: "username110" }, 
                    { idx: 7, username: "username111" } 
                ], 
                keyColumn: "idx", 
                width: "100%", 
                height: 200, 
                rowHeight: 32
            }
        });
        fuckingNexacro.setReadonly(); // 읽기전용으로 설정
        fuckingNexacro.setEditable(); // 쓰기모드로 변경
    });
</script>
warning setReadonly 메소드를 통해 데이터그리드 자체를 잠그는 것이 가능하며, 이로 인해 데이터 수정 및 추가/삭제를 수행하는 모든 메소드가 차단됩니다.
Ctrl + C 를 통한 복사는 가능하지만 Ctrl + V 를 통한 붙여넣기는 차단됩니다. 해당 페이지에서 즉시 확인이 가능하므로 개발자도구를 여시고 확인해주세요.
차단되는 메소드는 documentation 의 api.md 를 통해 확인하실 수 있습니다. "수정가능/읽기전용 지정하기" 문단을 확인해주세요.