728x90
반응형
SMALL
1. 무조건 있어야 하는 파일들
<!-- 아이비시트 필수파일존재
<script type="text/javascript" src="${pageContext.request.contextPath}/product/sheet/ib.util.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/product/sheet/ib.common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/product/sheet/ibsheetinfo.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/product/sheet/ibsheet.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/product/sheet/ibleaders.js"></script>
-->
<!-- 필수 JAR 파일들-->
ibsheet7-2.0.x.jar
batik-all-xml.jar
commons-codec-1.10.jar
commons-logging-1.1.3.jar
log4j-1.2.13.jar
poi-3.13-all.jar
2.Body 태그 안에서 자체로 IBSHEET를 생성해주는 함수를 호출해주자.
createIBSheet("mySheet", "750px", "400px", "en");
IBSHEET 객체를 생성해주는 함수
<HTML>
<body>
<div class="subConView">
<div class="conWrap">
<div class="sectionCon">
<div class="tabs-container">
<ul class="nav nav-tabs" id="project_tab">
<!-- 버튼 -->
<div class="buttonGroup">
</div>
</ul>
</div>
<div class="BtnGroupR" style="margin-bottom: 10px;">
<a href="${pageContext.request.contextPath}/project/useradd?id=<c:out value="${getProjectId }"/>" class="btn btn-primary" >참여인력 추가</a>
<a href="javascript:doAction('save')" class="btn btn-primary">저장</a>
</div>
</div>
<div class="ib_product" style="height:600px;">
<script type="text/javascript">
createIBSheet("mySheet", "100%", "100%");
</script>
</div>
</div>
</div>
</body>
</HTML>
3.서버에서 던진 데이터를 IBSHEET에 넣어서 같이 조회하자
3-1.빨간색 의 IBSHEET 헤더 부분을 만들어주자
<script language="javascript">
//IBSHEET 가져오는 함수
function LoadPage() {
//1.먼저 아이비시트 초기화를 해준다.
var initSheet = {};
//만들어진 전체 IBSHEET에 대한 속성을 걸어준다. EX)자동으로 데이터가 많아지면 스크롤바가 생김
initSheet.Cfg = {
SearchMode : smLazyLoad,
DeferredVScroll : 1
};
//IBSHEET의 헤더를 만들어주는 부분
initSheet.Cols = [
{
Header:"제외", //보여줄 원하는 이름
Type:"DelCheck", // 삭제 체크박스가 생김
SaveName:"DELCHECK", //추후 서버에 보내줄때 MAP 타입의 KEY 로서 사용됨
MinWidth:10,
Width:10
},{
Header : "성명",
Type : "Text", //입력이 가능하다
SaveName : "user_name",
MinWidth : 40,
Align : "Center"
}, {
Header : "프로젝트 참여자",
Type : "Combo",
ComboText :"외부감독자|책임자|참조자|팀원|의자결정권자|평가위원장|평가위원",
ComboCode : "1|2|3|4|5|6|7", //ComboText는 보여줄 이름, ComboCode는 ComboText값의 value 값 ex)selectBox 에서 option을 선택했을때 출력되는 innerText와 value 값을 생각하면 됨
MinWidth : 40,
Width : 40,
Wrap : 1,
MultiLineText : 1, //shift+Enter 를 눌러서 text안에서 편집중 줄바꿈이 가능함
SaveName : "group_id",
Align : "Center"
}, {
Header : "직급",
Type : "Text",
MinWidth : 30,
Width : 40,
SaveName : "rank",
Align : "Center"
}, {
Header : "부서",
Type : "Text",
MinWidth : 40,
Width : 40,
SaveName : "department_name",
Align : "Center"
},{
Header : "상태",
Type : "Status", // IBSHEET가 알아서 데이터가 삭제되면 Status 값을 D, 추가되면 I, 수정은 U 로서 판단할수있으며 추후 서버에 넘겨서 DATA[i].getStatus==I 라는 조건으로 CRUD를 구현하면됨
MinWidth : 40,
Width : 40,
SaveName : "Status",
Align : "Center",
Hidden : 1 //IBSHEET에서 보이지 않게 하기 1:안보임 0 또는 선언을 안하면:보임
} ,
{
Header : "프로젝트번호",
Type : "Text",
MinWidth : 40,
Width : 40,
SaveName : "project_id",
Align : "Center",
Hidden : 1
}
];
//초기화=> EX)내가 어떤 컬럼을 편집중이다가 초기화 버튼을 누르면 처음 서버에서 받은 상태의 IBSHEET로 돌아간다.
IBS_InitSheet(mySheet, initSheet);
//doAction 자체함수를 이용하여 조회를 시작한다.
doAction('search');
}
/*Sheet 각종 처리*/
function doAction(sAction) {
switch (sAction) {
case "search": //조회
mySheet.LoadSearchData(total);
break;
case "save": //저장
console.log("저장");
//저장 시 트랜잭션 변화가 있는 데이터 전부를 보내기 위해 Param 속성을 이용하여 시트의 변화있는 전체 데이터를 전소
var data = JSON.stringify(mySheet.GetSaveJson());
mySheet.DoSave("/project/usersave",{// /project/usersave경로를 받는 컨트롤러로 이벤트 발생후의 변경된 결과값을 서버로 보내어 DB에 저장시켜주자
"Param" : data,
"UrlEncode" : 0
});
console.log(data);
break;
}
}
window.addEventListener("onload", LoadPage()); //위의 각종 처리 이벤트가 완료되면 자동으로 새로고침이 되어 변경된 IBSHEET가 나온다.
</script>
3-2.파란색 의 헤더에 걸 맞는 데이터를 넣어주자.
2-1.서버에서 데이터형식에 맞게 가공하여 IBSHEET에 전달하자
IBSHEET에 데이터를 전달해줄때 지켜줘야 하는 형식이 있다.
{"DATA":[ {~,~}, {~,~} ]}
해당 형식을 서버에서 가공해서 IBSHEET에게 던져줘야한다.
필자는 DB에서 꺼낸 데이터를 JSON 배열로 만들고 JSONObject의 키값을 DATA로 VALUE를 JSON배열로서 넘겨주었다.
@RequestMapping(value="/test", method=RequestMethod.GET)
public ModelAndView test(Principal loginUser, Model model, String selectDepartment) throws ParseException, org.json.simple.parser.ParseException {
List<Map> projectMemberList = jobService.selectProjectMember(menu_Id);
for(int i=0; i<projectMemberList.size(); i++) {
ObjectMapper objectMapper = new ObjectMapper();
jsonString = objectMapper.writeValueAsString(projectMemberList.get(i));
JSONParser jsonParser = new JSONParser();
JSONObject jsonObj = (JSONObject) jsonParser.parse(jsonString);
projectMemberjsonarr.add(jsonObj);
}
JSONObject projectMemberjson = new JSONObject();
projectMemberjson.put("DATA", projectMemberjsonarr);
}{"DATA":[{"group_id":2,"user_name":"윤주영","department_name":"연구개발1","rank":"사원"},{"group_id":4,"user_name":"류슬희","department_name":"미정"}]}
2-2 서버에서 받은 데이터를 자바스크립트에 맞게 다시 변형시켜 IBSHEET가 생성되는 시점에 데이터를 넣어주자,
서버에서 전달한 형식은 JAVA 타입이므로 JAVASCRIPT에 맞게 다시 변형시켜주자.
서버에서 전달한 데이터를 JSTL 태그로 받고있다.
<input type="hidden" id="projectMemberjson" value='<c:out value="${projectMemberjson}"/>'>
var json = document.getElementById('projectMemberjson').value;
//자바에서 던져서 확인해보면 공백이 같이 날라오는데 자바스크립트에서는 "으로 읽히므로 정규식으로 제거하자
var json1=json.replace(/"/g,'"')
alert("서버에서 html 공백 특수문자 제거하고: "+json1);
//JSON 형식의 배열을 객체형태로 변환하여 키값으로 VALUE값을 뽑도록하자
var test3 = JSON.parse(json1);
//2. 서버에서 가져온 1의 데이터들을 IBSHEET를 로드하는 함수에 적용시켜준다.
var list = new Array();
var total = new Object();
//IBSHEET를 가져오는 함수 시점 안에서 데이터를 넣어주자.
function LoadPage() {
for(var i=0; i<test3.DATA.length; i++) {
var data = new Object();
var pm = test3.DATA[i];
data.user_name = pm.user_name; //이름
data.group_id = pm.group_id; //역할
data.rank = pm.rank; //직급
data.department_name = pm.department_name; //부서
list.push(data);
}
total.DATA = list; //오브젝트 형태의 DATA 키 값에 배열값을 넣어주면 끝!
.
.
.
.
.
.
.
.
.
.
}
728x90
반응형
LIST
