FuckingNexacro

brightness_7
menu
arrow_upward

arrow_drop_down_circle 데이터 선택 (콤보박스)

콤보박스 설정하기

자유입력식이 아닌 선택지 중에서 데이터를 고르는 방식으로 열을 설정할 수 있습니다.

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

// group 을 배열 형태의 데이터로 설정 시 select 형태로 사용 가능
group: [{ value: true, text: "Y" }, { value: false, text: "N" }] // "Y" 와 "N" 으로 보여지지만 실제로 취급되는 데이터는 true 와 false
group: null // select 콤보박스를 사용하지 않음

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

<script>
    let fuckingNexacro;
    let rateGroup = [
        { value: "1", text: "★☆☆☆☆" },
        { value: "2", text: "★★☆☆☆" },
        { value: "3", text: "★★★☆☆" },
        { value: "4", text: "★★★★☆" },
        { value: "5", text: "★★★★★" }
    ];
					
    window.addEventListener("DOMContentLoaded", () => {
        fetch("https://dummyjson.com/quotes").then(res => res.json()).then(resultList => {
            fuckingNexacro = new FuckingNexacro({
                target: document.querySelector("#fuckingNexacro"), 
                props: {
                    column: [
                        { key: "id", text: "id", width: 80, type: "number", fixed: true, format: null }, 
                        { key: "quote", text: "구절", width: 240, type: "string", fixed: false, format: value => value }, 
                        { key: "author", text: "지으니", width: 100, type: "string", fixed: false, format: value => value }, 
                        { key: "rate", text: "평가", width: 120, type: "number", fixed: false, group: rateGroup, format: null }
                    ], 
                    data: resultList.quotes, 
                    keyColumn: "id", 
                    width: "100%", 
                    height: 320, 
                    rowHeight: 32
                }
            });
        });
    });
</script>

지정된 포맷

column.group 을 지정하기 위한 형식이 있으며, 이 양식의 형태여야 콤보박스로 선택할 수 있습니다.

<script>
    let comboboxList;
    /* 1. 배열 형태여야 합니다. 갯수 제한은 없으나 표시제한은 5개입니다. */
    comboboxList = [];
    
    /* 2. 2개의 프로퍼티로 구성되며, 각각 value, text 로 구성됩니다. */
    comboboxList = [
        { value:  1, text: "1점" }, 
        { value:  2, text: "2점" }, 
        { value:  3, text: "3점" }, 
        { value:  4, text: "4점" }, 
        { value:  5, text: "5점" }, 
        { value:  6, text: "6점" }, 
        { value:  7, text: "7점" }, 
        { value:  8, text: "8점" }, 
        { value:  9, text: "9점" }, 
        { value: 10, text: "10점" }
    ];
    
    /* 3. 이미 존재하는 데이터를 group 으로 사용하기 위한 경우에는 [].map 을 이용해 group 에 맞는 형태로 변환해서 사용하면 됩니다. */
    let existsDataList = [
        { 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" }, 
        { idx:  8, username: "username08" }
    ];
    comboboxList = existsDataList.map(item => ({ "value": item.idx, "text": item.username }));

    const example = new FuckingNexacro({
        target: elExample, 
        props: {
            column: [
            	{ "group": comboboxList }
            ]
        }
    });
</script>

warning column.type 이 boolean 일 경우 group 속성은 무시됩니다.
콤보박스가 아닌 체크박스가 나타나는 경우 type 이 boolean 으로 지정되었는지 확인해주세요.