2022-05-25 개발일기 [Django, toast grid]

카테고리 관련 우선순위를 정하는 로직을 중 toast grid 를 총 2가지로 하나의 셀을 클릭하면 옆에 있는 toast grid에서 관련된 카테고리를 보여주는 형식의 인터페이스를 구현해보았다. 물론 혼자만의 힘으로 한거는 아니지만 대충 자신이 알고있는 방식을 올림으로써 공유하고 다음번에도 참고할 수 있도록 해야겠다 !!! 

 

 

현재 80% 이상은 완료하였고 5월말까지라서 시간이 별로 없지만 허들을 올려서 조금더 열심히 해야겠다 !!

 

개발스크립트 [script]

grid.on('click', ev => {

    if (ev.columnName === 'name') {
        let catid = grid.getRow(ev.rowKey).id
        rdata = {action: 'productgrid', catid: catid}
        let exit = $(".prodrowul").children().length
        if (exit) {
          let msg = confirm('품목 정보가 저장되지 않습니다. 진행하시겠습니까?')
            if (msg) {
                $(".prodrowul").empty()
            }
        } else {
            grid2.readData(1, rdata, false)
        }
    }

function categorytable(datasource) {

    return new tui.Grid({
        el: document.getElementById('grid'),
        rowHeaders: ['rowNum'], // 체크 박스
        scrollX: false,
        scrollY: true,
        data: datasource,
        bodyHeight: 700,
        columns: [
            {
                header: '카테고리 명',
                name: 'name',
                align: 'center',
                className: 'bg-light pointer',
            },
            {
                header: '순위',
                name: 'id',
                sortable: true,
                align: 'center',
                width: 100,
                renderer: {
                    type: categorynamerender
                },
                hidden: true
            },
            {
                header: '세부 품목',
                align: 'center',
                name: 'product',
                renderer: {
                    type: categoryrender
                },
                hidden: true
            },
        ],
        draggable: true
    });
}

function producttable(datasource) {

    return new tui.Grid({
        el: document.getElementById('grid2'),
        rowHeaders: ['rowNum'], // 체크 박스
        scrollX: false,
        scrollY: true,
        data: datasource,
        bodyHeight: 700,
        bodyWidth: 100,
        columns: [
            {
                header: '품목 명',
                name: 'name',
                align: 'center',
                className: 'bg-light pointer',
            },
            {
                header: '상세 정보',
                name: 'id',
                align: 'center',
                renderer: {
                    type: categorynamerender
                },
                hidden: true
            },
        ],
        draggable: true
    });
}