FuckingNexacro

brightness_7
menu
arrow_upward

subheader 헤더 설정

헤더 보이기/숨기기

헤더를 보이지 않게 숨길 수 있습니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.

fuckingNexacro.showHeader(); // 헤더 보임
fuckingNexacro.hideHeader(); // 헤더 숨김

<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
            }
        });
        fuckingNexacro.hideHeader();
    });
</script>

헤더 보이기 헤더 숨기기

헤더 더블클릭 이벤트 지정하기

헤더의 열을 더블클릭할 때 발동할 이벤트를 지정할 수 있습니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.

fuckingNexacro.setOnColumnDoubleClick(columnItem => { /* event function body */ }); // 헤더 보임

<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.setOnColumnDoubleClick(columnItem => alert(columnItem["text"] + "(" + columnItem["key"] + ") 열의 헤더 더블클릭 이벤트입니다."));
    });
</script>

warning 헤더 셀에만 이벤트가 적용됩니다.
데이터 셀의 더블클릭 이벤트가 아닌 헤더 셀의 더블클릭 이벤트에 한합니다.

check 해당 기능은 특정 열을 기준으로 데이터(레코드)를 정렬하기 위한 기능에서 주로 사용됩니다.
데이터 정렬 문서를 참조해주세요.