반응형 공부기록/라이브러리11 [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. [Tabulator] 사용법(자바스크립트 그리드 라이브러리) 자바스크립트 grid 라이브러리 - Tabulator http://tabulator.info Tabulator - Interactive JavaScript Tables Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library. tabulator.info 간단하게 소개하자면 HTML 테이블과 js array, ajax data source, json 데이터를 테이블로 만들어주는 라이브러리입니다. 가장 훌륭한 점은 무료라는 거쥬! 예제와 doc이 잘 정리되어 있으니 사실 이것만 보고도 잘 사용할 수 있다. 반드시 필요한 js와 css " targ.. 2021. 7. 17. 이전 1 2 3 다음 728x90 반응형
