본문 바로가기
반응형

tabulator7

[Tabulator] 페이징 방법(pagination local vs. remote) Tabulator에는 pagination 기능을 지원한다. 두 가지 방식으로 사용이 가능하다. local과 remote 용어에서 보면 알 수 있듯 local은 tabulator를 사용한 페이지 내에서 pagination을 가능하게 하고 remote는 서버 자체에서 pagination을 구현할 수 있도록 지원하는 속성이다. 1. local ------ javascript ------ var table = new Tabulator("#table1", { layout:"fitColumns", placeholder:"데이터가 존재하지 않습니다.", pagination:"local", paginationSize: 10, columns : [ { title: "순번", field: "", minWidth: 50, .. 2022. 12. 28.
[Tabulator] 체크박스로 행 선택 / rowSelectionChanged 콜백함수 구현 목표: 첫 번째 컬럼에 체크박스 삽입 후 체크박스로 행 선택 컨트롤 위와 같이 체크박스로 행 선택하는 건 옵션으로 간단하게 만들 수 있다. var table = new Tabulator("#example-table", { height:"311px", columns:[ {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false }, {title:"Name", field:"name", width:200}, {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number"}, {title:"Gender", field:.. 2021. 7. 27.
[Tabulator] cell & row click event 동시에! 2021.07.18 - [공부기록/JQUERY] - [Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용) 위 포스팅에서 아이콘을 사용해서 edit, delete 기능을 구현했다. 바로 cellClick 함수를 이용해서~ 그리고 행을 클릭하면 해당 행의 상세보기 화면을 띄우는 기능을 구현하고자 했다. 이때 cellClick과 rowClick의 이벤트가 동시에 발생하는 문제를 막기 위해 다음과 같이 작성해준다. table = new Tabulator("#dic", { layout:"fitDataFill", placeholder:"데이터가 존재하지 않습니다.", columns : [ { formatter:"responsiveCollapse", width:50, minWidth:50, hozA.. 2021. 7. 20.
[Tabulator] 등록 버튼 + 입력 폼 + 팝업 + 행 추가 구현목표: Tabulator 라이브러리를 사용하여 행추가 기능을 확장 기존 라이브러리는 행추가 버튼을 누르면 새로운 행이 추가되고, 거기에 에디터를 달아서 cell을 클릭하여 에디터로 값을 입력하는 기능을 제공한다. 하지만 입력해야 되는 값이 많다면? 입력 폼이 필요할 것이다! 그래서 등록버튼 + 입력 폼 + 팝업을 이용하여 등록 기능을 구현해보았다. html 등록 button에 팝업창 띄우는 함수를 추가해준다. popup.jsp × ... 취소 확인 table 생성해주는 javascript var table; $(function(){ table = new Tabulator("#dic", { layout:"fitDataFill", placeholder:"데이터가 존재하지 않습니다.", columns : .. 2021. 7. 18.
728x90
반응형

티스토리툴바