목록Front-end (3)

개발자's Life

[JavaScript] DataTable 이용하여 간단한 테이블 만들기

DataTable 을 이용하여 간단하게 Table 을 만들 수 있다. 백앤드에서 들어오는 데이터는 Json 형태로 다음과 같다 [ {"col1" : "col_1", "col2" : "col_2", "col3" : "col_3", "col1" : "col_4"}, {"col1" : "col__2", "col2" : "col_3", "col3" : "col_4", "col1" : "col_5"}, {"col1" : "col__3", "col2" : "col_4", "col3" : "col_5", "col1" : "col_6"}, {"col1" : "col__4", "col2" : "col_5", "col3" : "col_6", "col1" : "col_7"}, {"col1" : "col__5", "col2"..
Front-end 2023. 7. 28. 17:23
[JavaScript] Slick Grid 와 Select2 박스 사용법

(일기형태의 메모장이라 '다' 로 끝납니다.) Slick Grid 플러그인과 Select2 박스를 접목시켜 사용해보았다. 우선 Slick Grid 자체적으로 Select2 박스를 사용할 수 있게 되어 있지만 내가 원하는 형태는 아니였다. 아래 링크는 Slick Grid 자체적으로 Select2 를 이용할 수 있는 데모 및 코드이다. https://6pac.github.io/SlickGrid/examples/example-select2-editor.html SlickGrid example: 'Select2' javascript dropdown editor 6pac.github.io 내가 한 방법에 대해서 순서대로 적어본다.(slickGrid 셋팅은 생략) 1. formatter 를 개별적으로 만든다. fu..
Front-end 2023. 5. 22. 12:22
[JavaScript] Slick Grid 를 이용하여 Col, Row 고정 시키기

오늘은 회사 신규모듈 예산 기능 개발중에 틀 고정 기능이 있으면 좋을 듯 하여 시간은 빠듯하지만 Slick Grid 의 틀 고정 기능을 사용하여 완성하였습니다. 확실히 컬럼이 많은 테이블일 경우 틀 고정 기능은 필수라 생각이 드네요. https://github.com/6pac/SlickGrid/blob/master/examples/example-frozen-columns-and-rows.html#L363 GitHub - 6pac/SlickGrid: A lightning fast JavaScript grid/spreadsheet A lightning fast JavaScript grid/spreadsheet. Contribute to 6pac/SlickGrid development by creating a..
Front-end 2023. 3. 2. 20:44
Prev 1 Next