본문 바로가기

javascript/Tabulator

 (7)
타블레이터 index 필요할 때 getIndex() 타블레이터에서 index가 필요한 순간이 있다. getData()는 말그대로 데이터만 가져오기 때문에 초기에 타블레이터 테이블을 만들 때, index를 지정해주고, rowSelected 할 때, getIndex()로 불러올 수 있다! odAn.grid1 = new Tabulator('#gridTest',{ placeholder:"데이터를 불러오는 중입니다", layout:"fitDataStretch", index: "R_ID", initialSort:[ {column:"R_NAME", dir:"asc"}, ], columns: [ { field: "R_ID", title: "R ID", width: "42%", sorter:"number",}, { field: "R_NAME", title: "R 명", ..
Tabulator 타블레이터 행 움직이게 하는 옵션 tabulator에서 테이블 1개에서 그리드를 이동시키거나, 테이블 2개 사이를 행이 왔다갔다 하는 옵션. 타블레이터 행을 움직이게하는 옵션, movableRows:true, movableRowsConnectedTables:'', movableRowsReceiver: "add", 공식 문서 : https://tabulator.info/docs/5.2/move#rows-table Tabulator - Interactive JavaScript Tables Create interactive data tables in seconds with Tabulator. A free, open source, fully featured JavaScript table / data grid generation library. ..
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..

티스토리툴바