FuckingNexacro

brightness_7
menu
arrow_upward

chips 버튼

데이터 건당 버튼 제공하기

단순히 값을 수정하는 것 이상의 기능이 요구될 때는 사용자 지정 심층기능을 실행하기 위한 버튼을 생성할 수 있습니다.

props.button 을 통해 데이터 열이 아닌 기능 열을 신규로 추가하여 제공합니다.

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

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

<script>
    let fuckingNexacro;

    window.addEventListener("DOMContentLoaded", () => {
        fuckingNexacro = new FuckingNexacro({
            target: document.querySelector("#fuckingNexacro"), 
            props: {
                column: [
                    { key: "idx", text: "일련번호", width: 120, type: "number", fixed: false, format: null }, 
                    { key: "username", text: "사용자명", width: 240, type: "string", fixed: false, format: null }
                ], 
                data: [
                    { idx:  0, username: "username00" }, 
                    { idx:  1, username: "username01" }, 
                    { idx:  2, username: "username02" }, 
                    { idx:  3, username: "username03" }, 
                    { idx:  4, username: "username04" }, 
                    { idx:  5, username: "username05" }, 
                    { idx:  6, username: "username06" }, 
                    { idx:  7, username: "username07" }
                ], 
                keyColumn: "idx", 
                width: "100%", 
                height: 200, 
                rowHeight: 32, 
                button: {
                    header: "버튼", 
                    text: dataItem => (("" + dataItem["username"]) || "") + " 의 설정", 
                    class: dataItem => "btn_flat waves-effect waves-light", 
                    width: 160, 
                    fixed: true, 
                    visible: dataItem => true, 
                    enable: dataItem => true, 
                    onclick: dataItem => { alert((("" + dataItem["username"]) || "") + " 의 기능을 제공하기 위한 콜백 함수입니다."); } 
                }
            }
        });
    });
</script>

warning 버튼 열은 오로지 1개만 제공되며, 다수의 버튼을 등록할 수 없습니다.
다수의 기능이 필요할 경우에는 팝업과 같이 버튼 클릭을 통한 다음 여러 기능 중 하나를 선택할 수 있도록 별도의 구현이 필요합니다.

check 절대로 암기하지 마시고 필요할 경우 문서를 참고하여 차분히 사용하시는 것이 좋습니다.
이거 암기해서 잘 사용한다고 상여금 세제곱 네제곱으로 나오는거 아닙니다.

응용하기

버튼의 콜백함수를 지정하고 이를 이용하여 다른 이벤트를 촉발시키는 예시입니다.

info 테스트 데이터로 https://dummyjson.com/ 의 데이터를 사용하였습니다.

<div style="display:flex;">
    <div id="example0" style="width:48%;margin-right:2%;"></div>
    <div id="example1" style="width:48%;margin-right:2%;"></div>
</div>

<script>
    let example0;
    let example1;
    
    window.addEventListener("DOMContentLoaded", () => {
        example0 = new FuckingNexacro({
            target: document.querySelector("#example0"), 
            props: {
                column: [
                    { key: "id", text: "등록번호", width: 120, type: "number", fixed: true, format: null }, 
                    { key: "username", text: "사용자명", width: 240, type: "string", fixed: false, format: value => value }
                ], 
                data: [], 
                keyColumn: "id", 
                width: "100%", 
                height: 240, 
                rowHeight: 24, 
                button: {
                    header: "게시이력", 
                    text: dataItem => (dataItem["username"]) + " 의 게시글 보기", 
                    class: dataItem => "btn-flat waves-effect waves-light", 
                    width: 160, 
                    fixed: true, 
                    visible: dataItem => true, 
                    enable: dataItem => true, 
                    onclick: dataItem => fetch("https://dummyjson.com/posts/user/" + dataItem["id"]).then(res => res.json()).then(resultList => example1.setDataList(resultList["posts"]))
                }
            }
        });
        example1 = new FuckingNexacro({
            target: document.querySelector("#example1"), 
            props: {
                column: [
                    { key: "id", text: "포스트 등록번호", width: 120, type: "number", fixed: false, format: null }, 
                    { key: "title", text: "포스트 제목", width: 240, type: "string", fixed: false, format: value => value }, 
                    { key: "tags", text: "태그", width: 200, type: "string", fixed: false, format: value => value?.join(", ") || "" }, 
                    { key: "views", text: "조회수", width: 120, type: "number", fixed: false, format: value => value }
                ], 
                data: [], 
                keyColumn: "id", 
                width: "100%", 
                height: 240, 
                rowHeight: 24
            }
        });
    });
</script>