<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script src="codebase/dhtmlxcommon.js"></script>
<script src="codebase/dhtmlxgrid.js"></script>
<script src="codebase/dhtmlxgridcell.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script src="jquery.json-2.3.js"></script>
<script type="text/javascript">
var dataset=null;
var cnt=0;
var mygrid=null; // 전역변수 선언해서 여러곳에서 사용가능
var cellName=['','id','pw','addr','tel'];
$(document).ready(function() {
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath('codebase/imgs/');
mygrid.setHeader('DEL,ID,PW,ADDR,TEL'); //칼럼이름
mygrid.setColTypes('ch,ed,ed,ed,ed'); //칼럼 타입
mygrid.setSkin('dhx_skyblue');
mygrid.init(); // setVisible true한 효과다. 꼭 해줘야 함
mygrid.attachEvent("onEditCell",editCellFunc); //onEditCell이벤트 등록
mygrid.attachEvent("onCheck",checkFunc); //onCheck이벤트
$("#list").click(listFunc); //아이디를 사용할때는 # 이용 ex) "#list"
$("#add").click(addFunc); //태그 사용할때는 ex) ":input"
$("#update").click(updateFunc);
});
function editCellFunc(stage,rId,cInd,nValue,oValue){
//alert(stage); //클릭하면 0, 수정가능상태가 되면 1, 수정완료시 2
if(stage==2){ //만약에 수정완료되면~ 실행!
//rId=행값 0부터 시작, cInd=열값 1부터 시작, nValue=새로입력된값, oValue=변경전 값.
var name=cellName[cInd]; //cInt는 인덱스 1부터 시작함을 기억한다.
if(dataset[rId].state=="normal")
dataset[rId].state="update"; //dataset[0] 은 list를 가르킨다.
dataset[rId][name]=nValue;
}
return true; // return 값은 true 처리해야한다!
}
function checkFunc(rId,cInd,state){
//alert(state); //체크하면 true 체크해제하면 false
dataset[rId].state=state ? "delete" : "normal"; // state가 true면 delete false면 normal
}
function listFunc(){
$.ajax({ // ajax 실행소스 꼭 외워야 한다.
dataType:'json', //데이타 타입을 JSON으로 변환하는 소스
//$.parseJSON(data) // <--- 문자열을 JSON 오브젝트로 변환
url:'json.jsp', // json.jsp으로 이동~
cache:false, //이전 실행 캐쉬를 없앤다
success:function(data){ //성공했을 때 실행로직
//alert(data.list);
dataset=data.list; //data.list(배열)을 dataset에 초기화 시킨다.
$.each(data.list, function(index,m){
//each안에는 배열,function이 들어간다.
mygrid.addRow(cnt++,['0',m.id, m.pw, m.addr, m.tel]);
//DB에 있는 수만큼 출력
//여기서 0은 체크여부를 의미한다. 0는 체크 x, 1은 체크 o
});
},
error:function(a,b,c){ // 실패했을때 실행로직
alert(a+","+b+","+c);
}
});
}
function addFunc(){
dataset.push({"state":"insert","id":"","pw":"","addr":"","tel":""});
//push를 사용해서 배열이 추가된다
// mygrid는 mygrid대로 push는 push대로 추가되는 것이다
mygrid.addRow(cnt++,['0',"","","",""]); //버튼을 누를때마다 체크 안된줄이 추가된다.
//여기서 cnt++는 cnt는 전역변수 선언해 놨으며 저 자리는 칼럼ID이기 때문에 중복되어선 안된다.
//alert(dataset.length);
}
var insertArray=[];
var updateArray=[];
var deleteArray=[];
function updateFunc(){
$.each(dataset, function(index, m){
switch(m.state){
case 'insert' : insertArray.push(m); break;
case 'update' : updateArray.push(m); break;
case 'delete' : deleteArray.push(m); break;
}
});
var sendObject={"insert":insertArray,"update":updateArray,"delete":deleteArray};
var sendMsg=$.toJSON(sendObject); //json 으로 바꿔주는 로직
alert(sendMsg);
}
</script>
</head>
<body>
<input type="button" id="list" value="list">
<input type="button" id="add" value="add">
<input type="button" id="update" value="update"><p>
<div id="gridbox" style="width:300px;height:400px;"></div>
</body>
</html>