본문 바로가기

tabulator

(6)
Tabulator와 Chart.js 활용시, Chart.js 데이터를 Tabulator에 넣는 방법. Chart.js를 활용하여 차트를 먼저 만들어 놨는데, Tabulator를 추가할 일이 생겼다. 데이터를 처음부터 다시 가공하기 보다는 만들어 놓은 chart 데이터를 조금만 변형하면 되겠다. Chart.js에서 사용중인 데이터는 다음과 같다. ChartData : {"date":["2023-10-05 12:45:00","2023-10-05 13:00:00","2023-10-05 13:15:00","2023-10-05 13:30:00"],"TRF":[253,256,274,249],"WD_TRF":[268,261,275,274],"YD_TRF":[268,261,275,274],"PDST":[54,45,96,101],"WD_PDST":[58,25,74,101],"YD_PDST":[58,25,74,101],"..
타블레이터 tabulator 검색 기능 filter HTML 삽입 미리보기할 수 없는 소스 타블레이터 tabulator에서 검색기능을 이용하고 싶을 때! search가 아니라 filter라는 점.. .!! 코드펜에 작성한 부분은 공식 문서 보고 대략적으로 보이게끔 만든 것이고... 아래는 실제 적용했던 코드 일부를 가져옴 !! JS : $(function(){ mainApp.init(); }); //일부 복붙. const mainApp = { init: function(){ document.getElementById("filter-value").addEventListener("keyup", this.crsrdFilter); , crsrdFilter: function(){ const valueEl = document.getElementById("filter..
tabulator rowSelected와 rowClick 차이 tabulator rowSelected와 rowClick 차이를 Chat GPT에게 물어봤다. Tabulator 라이브러리에서 "rowSelected"와 "rowClick"은 행(로우)과 관련된 다른 이벤트입니다. 이 두 이벤트는 행을 선택하거나 클릭할 때 발생하며, 각각 다른 동작을 수행하도록 사용됩니다. 1. **rowClick 이벤트**: - **발생 시점**: 이 이벤트는 사용자가 행을 클릭했을 때 발생합니다. - **발생 조건**: 사용자가 어떤 행을 클릭했을 때만 이벤트가 발생합니다. - **주요 용도**: 주로 행을 클릭했을 때 발생하는 동작을 처리하는 데 사용됩니다. 예를 들어, 클릭한 행의 데이터를 가져와 상세 정보를 표시하거나 다른 동작을 수행하는 데 활용됩니다. 2. **rowSele..
타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 예시 코드 : const mainGrid = { createGrid: function(){ mainGrid.grid1 = new Tabulator('#testGrid', { placeholder:"No Data Set", movableRows:true, movableRowsConnectedTables:'#testGrid', movableRowsReceiver: "add", columns: [ { field: "C_ID", visible:false, }, { field: "C_NM", title: "", width:120, }, { field: "QNTY", title: "량", width:50,}, { field: "INCR", ti..
Tabulator 타블레이터 그리드(테이블) 2개 그리드1 : tableTempData = [ {ORIGIN:"남구", DETINATION:"남구", passage:"999,999", GRP_ID:"01"}, {ORIGIN:"동구", DETINATION:"남구", passage:"999,999", GRP_ID:"02"}, {ORIGIN:"서구", DETINATION:"남구", passage:"999,999", GRP_ID:"03"} ]; dsrcOD.grid1 = new Tabulator('#'+dsrcOD.pv+'Grid_od',{ data : tableTempData, placeholder:"No Data Set", movableRows:true, movableRowsConnectedTables:'#'+dsrcOD.pv+'Grid', movableR..
tabulator 그리드 무한대로 늘어나는 현상 display grid와 width auto infinite 원인 : tabulator 그리드 옵션 중 layout과 display:grid의 단위 1fr과 width: auto;와 position:absolute의 속성들이 만나서 생긴 현상. 부모와 조상 엘리먼트 중에서 고정값이 있어야 하는데 없어서 무한대로 늘어남. 해결방법 : 1. tabulator 옵션 layout : "fitColumns", 주석처리. 2. tabulator 감싸고 있는 바로 위 부모의 width:auto를 고정값으로 변경. 3. display:grid가 적용된 div의 grid-template-columns의 1fr 속성값을 고정값으로 변경. 4. #contents의 position:absolute의 값을 relative로 변경하면서 그 아래 자식들의 엘리먼트들의 구조를 변경해야함. 회..