FuckingNexacro



edit 데이터 수정

데이터 수정

별다른 설정을 건드리지 않는다면 각 셀마다 더블클릭을 통해 데이터를 수정할 수 있습니다.

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

<div id="fuckingNexacro"></div>
<script>
    let fuckingNexacro;

    window.addEventListener("DOMContentLoaded", () => {
        fetch("https://dummyjson.com/todos").then(res => res.json()).then(resultList => {
            fuckingNexacro = new FuckingNexacro({
                target: document.querySelector("#fuckingNexacro"), 
                props: {
                    column: [
                        { key: "id",        text: "ID",        width:  50, type: "number",  fixed: false, format: null }, 
                        { key: "todo",      text: "할 일",     width: 240, type: "string",  fixed: false, format: null }, 
                        { key: "completed", text: "완료여부",  width:  80, type: "boolean", fixed: false, format: null }, 
                        { key: "userId",    text: "사용자 ID", width: 100, type: "number",  fixed: false, format: null }
                    ], 
                    data: resultList.todos, 
                    keyColumn: "id", 
                    width: "100%", 
                    height: 320, 
                    rowHeight: 32
                }
            });
        });
    });
</script>






읽기전용 데이터 설정

특정 열의 데이터 수정을 막을 수 있습니다.
keyColumn 으로 설정된 열은 별도의 설정 없이 무조건 읽기전용으로 설정됩니다.

palette 해당 데이터그리드에 사용된 CSS 는 이곳을 참고하시기 바랍니다.
이후 다른 문서에서도 해당 CSS 가 공통적으로 사용되나 어디까지나 예시일 뿐이며, 사용자가 직접 CSS 를 자유자재로 수정하여 사용할 수 있습니다.
info 테스트 데이터로 https://dummyjson.com/ 의 데이터를 사용하였습니다.
close 기본형 과는 다른 읽기전용입니다. 이 페이지에서의 읽기전용은 열 단위를 읽기전용으로 만드는 방법입니다.
// format: null 로 설정할 경우 수정 가능
format: value => value // 데이터 값 그대로 보여주면서 읽기전용
format: value => value? "완료": "미완료" // 데이터 값에 따라 표시되는 데이터 형식을 지정하면서 읽기전용

<div id="fuckingNexacro"></div>
<script>
    window.addEventListener("DOMContentLoaded", () => {
        fetch("https://dummyjson.com/todos").then(res => res.json()).then(resultList => {
            fuckingNexacro = new FuckingNexacro({
                target: document.querySelector("#fuckingNexacro"), 
                props: {
                    column: [
                        { key: "id",        text: "ID",        width:  50, type: "number",  fixed: false, format: null }, 
                        { key: "todo",      text: "할 일",     width: 240, type: "string",  fixed: false, format: null }, 
                        { key: "completed", text: "완료여부",  width:  80, type: "boolean", fixed: false, format: value => value? "완료": "미완료" }, 
                        { key: "userId",    text: "사용자 ID", width: 100, type: "number",  fixed: false, format: value => value }
                    ], 
                    data: resultList.todos, 
                    keyColumn: "id", 
                    width: "100%", 
                    height: 320, 
                    rowHeight: 32
                }
            });
        });
    });
</script>

warning format 을 통해 함수식을 지정하게 되면 해당 열은 행 선택 중 Ctrl+C 를 통한 데이터 복사에서 제외됩니다.
보이는 데이터와 다루는 데이터가 동일한 수정가능 열에 한해서만 Ctrl+C, Ctrl+V 복붙 기능이 지원되는 점 참고바랍니다.
warning 열의 format 에 지정되는 모든 함수는 어떠한 열이라도 null 을 입력받았을 때 예외를 발생시키지 않아야 합니다.
null 을 입력받았을 때 예외를 발생시키는 함수가 하나라도 존재한다면 데이터그리드가 생성되지 않습니다.