2022-06-02 개발일기 [Django, Toast grid]

오늘은 Toast grid 내부에서 데이터를 렌더링 할 경우 예를들어 20개씩 100개씩 500개씩 모두보기 라는 형식을 선택했을시 일정 데이터가 넘어버리면 렌더링속도가 너무 늦어지는 현상을 발견했다. Toast gird 내부에서

virtualScrolling: true,

라는 내장함수를 지원해주길래 확실히 데이터 렌더링이 되는 속도가 최적화되는것을 느꼈다 하지만 아직까지는 많이 느리기때문에 Toast UI 내부에서 컬럼마다 데이터를 렌더링해주는 최적화 프로세스를 개발중이라고 하길래 기다리고 있는중이다. 해결하고 싶다...

 

 

 

개발스크립트 [script]

unction worklisttable(datasource) {
    return new tui.Grid({
        el: document.getElementById('grid2'),
        rowHeaders: ['checkbox'],
        scrollX: true,
        scrollY: false,
        data: datasource,
        virtualScrolling: true,
        columns: [
            {
                header: '주문자',
                name: 'username',
                align: 'center',
                className: 'bg-light',
            },
            {
                header: '수취인',
                name: 'username2',
                align: 'center',
                className: 'bg-light',
            },
            {
                header: '우편번호',
                name: 'RECEIVE_ZIPCODE',
                align: 'center',
                hidden: true

            },
            {
                header: '받는분주소(전체,분할)',
                name: 'RECEIVE_ADDR',
                align: 'center',
                hidden: true

            },
            {
                header: '받는분 전화번호',
                name: 'RECEIVE_CEL',
                align: 'center',
                hidden: true

            },
            {
                header: '받는분 기타연락처',
                name: 'USER_CEL',
                align: 'center',
                hidden: true

            },
            {
                header: '박스수량',
                name: 'BOX_EA',
                align: 'center',
                hidden: true

            },
            {
                header: '배송비',
                name: 'DELV_COST',
                align: 'center',
                hidden: true

            },
            {
                header: '운임구분',
                name: 'DELIVERY_METHOD_STR',
                align: 'center',
                hidden: true

            },
            {
                header: '품목',
                name: 'name',
                align: 'center',
                width: 400 ,

            },
            {
                header: '수량',
                name: 'quan',
                align: 'center',
                validation: {
                    validatorFn: (value, row, columnName) => value === 1
                },

            },
            {
                header: '고객주문번호',
                name: 'IDX',
                align: 'center',
                hidden: true
            },
            {
                header: '배송메세지',
                name: 'DELV_MSG',
                align: 'center',
                hidden: true
            },
            {
                header: '쇼핑몰주문번호',
                name: 'ORDER_ID',
                align: 'center',
                hidden: true
            },

            {
                header: '쇼핑몰',
                name: 'mallid',
                align: 'center',
            },
            {
                header: '운송장번호',
                name: 'INVOICE_NO',
                align: 'center',
                hidden: true

            },
            {
                header: '택배사명',
                name: 'DELIVERY_ID',
                align: 'center',
                hidden: true

            },

        ],
        columnOptions: {
            resizable: true,
        },
    })