w2ui 날짜와 시간이 함께 있는 필드에서 시간만 보이게 하고 싶을 때, render로 해결

상황요약 : 

- w2ui를 사용하여 DB값을 웹에 뿌려주고 있음.

- FIELD_NAME1_DATE의 값이 '2022-01-17 10:00:00' 이런식으로 나오는데, 시간만 '10:00:00'만 필요한 상황.

- 차트에는 날짜가 들어가야 그래프가 나오기 때문에 SQL을 건드리지 말아야 했었음.

- w2ui docs를 참고하여 해결.

 

수정전 : 

columns: [
    { field: 'FIELD_NAME1_DATE', caption: '캡션1', size: '28%' },
    { field: 'FIELD_NAME2', caption: '캡션2', size: '18%' },
    { field: 'FIELD_NAME3', caption: '캡션3', size: '18%' },
    { field: 'FIELD_NAME4', caption: '캡션4', size: '18%' },
    { field: 'FIELD_NAME5', caption: '캡션5', size: '18%' },
],

 

해결 : 

columns: [
    { field: 'FIELD_NAME1_DATE', caption: '캡션1', size: '28%', 
        render: function (rec) { //현재 레코드(jsonData)를 인수로 받음.
            return rec.FIELD_NAME1.substr(10,18); // 연월일 안보이게 잘라줌.
        }
    },
    { field: 'FIELD_NAME2', caption: '캡션2', size: '18%' },
    { field: 'FIELD_NAME3', caption: '캡션3', size: '18%' },
    { field: 'FIELD_NAME4', caption: '캡션4', size: '18%' },
    { field: 'FIELD_NAME5', caption: '캡션5', size: '18%' },
],

 

참고 :  Render 

https://w2ui.com/web/docs/2.0/w2grid.columns

The render function(record, extra) can be used to format the column data. If the function is defined then it will be executed for each cell in the column and anything this function returns will be used instead of the original column data. The render function will receive two arguments, first is the current record add the second is extra information, which is following object.

 

밑줄 친 것 해석 : render는 인수를 2개 받음. 첫번째는 현재 레코드, 두번째것은 추가적인 정보로.. 객체임.

w2grid.columns | JavaScript UI - w2ui