728x90
ag-Grid
i 이런저런 많은 유/무료 그리드(Grid) 플러인이 있는데, 현재까지 찾아본 것 중에서는 ag-grid 플러그인이
개인적으로 기능적으로나, 사용편의성 모두 가장 좋은 것으로 판단됨(겨우 이틀만에 판단).
단지 일부 기능(Group, Pivot등)이 엔터프라이즈 라이센스로 유료라는 점이 맘속에 도둑놈 심보가 있는지
괜스레 아쉽고도 넘나 아쉬움.
시작해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Ag-Grid 일단 맛보기</title>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>
<body>
<div id="myGrid" style="height: 600px; width:600px;" class="ag-theme-balham"></div>
<script>// 컬럼 헤더와 컬럼명 정의 var columnDefs = [ {headerName: "Make", field: "make"}, {headerName: "Model", field: "model"}, {headerName: "Price", field: "price"} ]; // 데이타 쪼금 var rowData = [ {make: "Toyota", model: "Celica", price: 35000}, {make: "Ford", model: "Mondeo", price: 32000}, {make: "Porsche", model: "Boxter", price: 72000} ]; // 그리드에게 컬럼정보와 데이타정보를 알려줌 var gridOptions = { columnDefs: columnDefs, rowData: rowData }; // 그리드 생성 var eGridDiv = document.getElementById("myGrid"); new agGrid.Grid(eGridDiv,gridOptions);</script>
</body>
</html>쪼메 더 해보기
[
{"name": "고민석", "alias": "숨겨진 고민", "strong": "다 이해됨", "weak": "근거가 없음"},
{"name": "윤승규", "alias": "보면 다 이해", "strong": "담배피며 여유찾기", "weak": "찾을 여유가 없음"},
{"name": "안재근", "alias": "수학의 달인", "strong": "수학잘함", "weak": "산수못함"},
{"name": "오진석", "alias": "허리 사선", "strong": "눈에 안띔", "weak": "존재가 안보임"},
{"name": "장우석", "alias": "일단 직진", "strong": "의외로 귀여움", "weak": "외모는 전혀 안 귀여움"},
{"name": "김준원", "alias": "경로당 느낌?", "strong": "나이로 대우받기", "weak": "신체나이는?"},
{"name": "이경훈", "alias": "외모는 진지", "strong": "눈빛은 남자", "weak": "말투는 여성여성"},
{"name": "고재영", "alias": "알람 그게 뭐얌", "strong": "계속 잠", "weak": "깨워도 잠"},
{"name": "황상문", "alias": "부끄부끄 초딩", "strong": "챙겨주고 싶음", "weak": "맛집을 모름"},
{"name": "이태원", "alias": "나름욜씨미 ", "strong": "친한척하기", "weak": "안 친하고 픔"},
{"name": "이진현", "alias": "멋짱이", "strong": "파란차색깔", "weak": "본인은 안 푸름"},
{"name": "최재성", "alias": "깨달은자", "strong": "남의 실수 잘 찾기", "weak": "본인 실수는 못 찾음"},
{"name": "윤현웅", "alias": "배탈", "strong": "넘 열심", "weak": "취미 없음"},
{"name": "송인용", "alias": "오마이걸", "strong": "유아 좋아함", "weak": "본인 나이는 어쩔"},
{"name": "이재현", "alias": "술쎄보임", "strong": "좋은마우스", "weak": "힘없음"},
{"name": "유자영", "alias": "그저 웃지요", "strong": "답변은 웃음으로", "weak": "입이 할일이 없음"},
{"name": "최윤정", "alias": "전공자", "strong": "서류상 전공자", "weak": "서류빼면 비전공자"},
{"name": "신은숙", "alias": "엄마", "strong": "노력 산더미", "weak": "결과는 티끌"},
{"name": "이태경", "alias": "비밀의 숲", "strong": "잘 감춤", "weak": "보여주면서 감춤"}
]
아작스로 데이타 가져와 보기
//아작스로 직접 데이타가져와서 아래 메소드로 데이타 세팅해보기 gridOptions.api.setRowData(JSON.parse(v_ajax.responseText));
컬럼에 속성 주기
sortable: true
filter: true
checkboxSelection: true
셀 에디팅 속성
옵션 속성에 아래 디폴트 컬럼 속성 설정
defaultColDef: { flex: 1, minWidth: 110, editable: true, resizable: true, }
페이지 관련 설정
pagination:true,
paginationAutoPageSize:true
paginationPageSize:8
gridOptions.api.paginationSetPageSize(11)
Row 선택 이벤트
onRowClicked : function(event){
console.log(event.data);
}
CSV로 내보내기
엑셀로 내보내기는 엔터프라이즈(유료) 기능
var v_params = {
suppressQuotes: "true", // none, true
columnSeparator: "tab", // none, tab, |
customHeader: "AAA BBB CCC DDD", // 헤더명 추가 출력
customFooter: "This is Footer" // 데이타 아래에 footer추가
}
gridOptions.api.exportDataAsCsv(v_params);
i 본 내용은 ag-grid의 문서 내용을 아주 쪼금만 읽고, 뽑아온 내용이라서
잘 쓰려면 문서를 쪼메 아주 더 많이 읽어야 합니다.
서버쪽 데이타와 연동시에 생각해보아야 하는 문제들이 있습니다. 특히 효율성부분