IBSheet 그리드 특강

|

1. 인사시스템 에서 활용해라~

2. IBSheetHTML개발자가이드_V7.0.13.x -> 를 참고할 것!

//grid.jsp(메인페이지)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<script src="./ibsheetinfo.js"></script>
	<script src="./ibsheet.js"></script>
	<script>
		function initPage(){
			createIBSheet2(document.getElementById("sheet_DIV"), "mySheet", "100%", "400px");
			
			var initSheet = {};
			initSheet.Cfg = {MergeSheet : msHeaderOnly, AutoFitColWidth:"initsearch"};
			initSheet.Cols = [
				{"DBTN":"X","Header":"상태","SaveName":"sStatus","Type":"Status","Align":"Center","MinWidth":60},
				{"DBTN":"X","Header":"달력","SaveName":"date","Type":"Text"},
				{"DBTN":"X","Header":"결재일","SaveName":"pay","Type":"Combo","Format":"Ymd","Align":"Center","MinWidth":100,"ComboText":"인사 | 사장","ComboCode":"01 | 02"},
				{"DBTN":"X","Header":"만기일","SaveName":"end","Type":"Date","Format":"Ymd","Align":"Center","MinWidth":100},
				{"DBTN":"X","Header":"직급","SaveName":"position","Type":"Button"}
			];
			IBS_InitSheet(mySheet, initSheet);
		}
		function action(str){
			switch(str){
			case 'insert':
				mySheet.DataInsert();
            break;
			case 'down':
				mySheet.Down2Excel({FileName:"mySheet.xlsx", SheetDesign:1});
			break;
			
			case 'search':
				var param = FormQueryString(document.frm);
				alert(param);
					mySheet.DoSearch("search.jsp", param);
			break;
			}
		}
	</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="initPage()">
	<form name="frm">
		사원명 : <input type="text" name="sa_name"><br>
		부서 : <input type="text" name="sa_dept"><br>
	</form>
	<button type="button" onClick="action('insert')">추가</button>
	<button type="button" onClick="action('down')">엑셀다운</button>
	<button type="button" onClick="action('search')">조회</button>
	<hr>
	<div id="sheet_DIV"></div>

</body>
</html>

// search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String[] sa_name = request.getParameterValues("sa_name"); //배열은 values로 받음.
	System.out.print("name" + sa_name);
%>   


1. html 자바스크립트 한계점을 극복하기 위한 것.
2. 대부분의 실무에서 사용.
3. html의 table div가 바탕이 됨.
4. 함수를 호출함으로써 각 컬럼의 기능, 데이터를 설정, 관여.
5. 데이터 조회방식 - 페이징조회, LazyLoad조회, 대량조회 (보통 한도는 max 50000여건)
-  데이터를 자바스크립트로 클라이언트 단에서 (예를 들어 1300개) 갖고 있고
fetch되는 갯수를 일정단위로 끊어서 보여줌.(50개씩 배열로 가지고 있고 계속 넘겨줌)
6. 그리드는 처음 조회된 값을 계속 기억하고 있음.
7. FrozenCol Integer,  MergeSheet  -> 주로사용하는 시트기본설정

 

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

6일차 JavaScript  (0) 2020.07.15
미니 프로젝트  (0) 2019.09.17
12일차 jQuery  (0) 2019.09.16
11일차 jQuery  (0) 2019.09.11
JavaScript - LinkedList, nodeType(재귀), Event 핸들러, DOM  (0) 2019.09.10
And