반응형 tabulator 사용법5 [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] 검색기능 커스터마이징 2021.07.17 - [공부기록/JQUERY] - [Tabulator] 사용법(데이터&테이블 바인딩 라이브러리) 기본 사용방법은 위 포스팅 참조~~ 구현목표: 기존 컬럼별 검색기능에서 전체 검색 확장하기 Tabulator 라이브러리에서는 컬럼별 검색기능을 제공한다. html - select, input, button 추가 등록 전체 용어명 용어설명 프로젝트 구분 검색 초기화 select에 onchange, input에 onkeyup, button에 onclick 이벤트를 추가한다. javascript function allSearch(data, searchWord) { if(Object.keys(searchWord).length == 0) { //검색어가 비었을때 return true; } var di.. 2021. 7. 19. [Tabulator] 등록 버튼 + 입력 폼 + 팝업 + 행 추가 구현목표: Tabulator 라이브러리를 사용하여 행추가 기능을 확장 기존 라이브러리는 행추가 버튼을 누르면 새로운 행이 추가되고, 거기에 에디터를 달아서 cell을 클릭하여 에디터로 값을 입력하는 기능을 제공한다. 하지만 입력해야 되는 값이 많다면? 입력 폼이 필요할 것이다! 그래서 등록버튼 + 입력 폼 + 팝업을 이용하여 등록 기능을 구현해보았다. html 등록 button에 팝업창 띄우는 함수를 추가해준다. popup.jsp × ... 취소 확인 table 생성해주는 javascript var table; $(function(){ table = new Tabulator("#dic", { layout:"fitDataFill", placeholder:"데이터가 존재하지 않습니다.", columns : .. 2021. 7. 18. [Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용) 2021.07.17 - [공부기록/JQUERY] - [Tabulator] 사용법(데이터&테이블 바인딩 라이브러리) 기본적인 사용법은 위 포스트 참조~ 이번 포스트에서는 몇가지 옵션에 대해 소개하고자 한다. [1] 반응형 레이아웃 아래 사진을 보면 좌측에 [-] 아이콘을 누르면 상세내역이 접히고, [+]아이콘과 함께 테이블이 보여진다. [2] 아이콘 삽입 우측에 수정, 삭제 아이콘 추가 [1] 반응형 레이아웃 var editorIcon = function(cell, formatterParams, onRendered) { return ""; } var deleteIcon = function(cell, formatterParams, onRendered) { return ""; } var table = new .. 2021. 7. 18. 이전 1 2 다음 728x90 반응형
