검색결과 리스트
JSON에 해당되는 글 2건
- 2009.04.08 JSON을 이용해 Data 처리하기~
- 2009.04.08 JSON을 이용해 DATA가져오기~
글
function Button1_onclick() {
window.open('../../Common/pop_person.aspx', '인원선택', 'toolbar=no,scrollbars=no,width=850px,height=595px');
}
function Callback(value){
for(var i = 0 ; i < value.length ; i++)
{
alert(value[i].DEPT_NAME);
alert(value[i].EMP_NAME);
alert(value[i].POS_NAME);
}
}
부모창에서는 이렇게 해서 자식창을 뜨게 해줍니다.
Callback함수는 자식창에서 호출해줄 함수에요
그 다음에는 자식창입니다.
일단 JSON등등을 사용하기 위해서
이녀석들을 추가해 줍니다.
(경로를 잘 맞춰줘야 겠죠? )
그 다음에는 실제로 DB에서 Data를 가져올 페이지를 만들어줍니다.
이름은 retrieveUserList.aspx 고
이녀석은 aspx쪽에는 아무것도 없어요.(실제로 사용자쪽에선 보이지도 않는 페이지구요)
cs쪽에서는
넘겨받은 QueryString을 이용해서 DB에 접속해서 dataset을 넘겨받고
string jsonStr = ""; jsonStr = this.parsingDataSet(ds); Response.Write(jsonStr);
private string parsingDataSet(DataSet ds) { int rowCount = ds.Tables[0].Rows.Count; string jsonStr = "{"; jsonStr = jsonStr + "'rowCount':'" + rowCount + "',data:["; for (int i = 0; i < rowCount; i++) { jsonStr = jsonStr + "{'EMP_ID':'" + ds.Tables[0].Rows[i]["EMP_ID"].ToString() + "'"; jsonStr = jsonStr + ",'EMP_NAME':'" + ds.Tables[0].Rows[i]["EMP_NAME"].ToString() + "'"; jsonStr = jsonStr + ",'DEPT_NAME':'" + ds.Tables[0].Rows[i]["DEPT_NAME"].ToString() + "'"; jsonStr = jsonStr + ",'POS_NAME':'" + ds.Tables[0].Rows[i]["POS_NAME"].ToString() + "'"; jsonStr = jsonStr + ",'DEPT_ID':'" + ds.Tables[0].Rows[i]["DEPT_ID"].ToString() + "'"; jsonStr = jsonStr + ",'OFFICE_PHONE':'" + ds.Tables[0].Rows[i]["OFFICE_PHONE"].ToString() + "'"; jsonStr = jsonStr + "},"; } jsonStr = jsonStr.Remove(jsonStr.Length - 1, 1); jsonStr += "]}"; return jsonStr; }
이런식으로 처리해서 리턴해 줍니다.
JSON으로 바꿔주는 형식
은 http://www.json.org/ << 여기에 나온데로 처리를 한거구요.
이제 pop_person쪽에서 처리하는걸 보여드리면요
retrieveUserList = function(value) { var url = "./retrieveUserList.aspx?dept_code="+value; var ajaxObj = new Ajax.Request(url, { method:'post', onComplete:showJsonData } ); }
이렇게 해서 retrieveUserList.aspx페이지를 호출해서 data를 가져오구
요 onComplete에서 showJasonData 함수를 호출해 줘요
var rowCount
var jsonStrObj
var array1 = new Array();
//여기까지는 그냥 필요한 변수들
showJsonData = function(originalData) {
jsonStrObj = originalData.responseText;
jsonStrObj = jsonStrObj.evalJSON();
rowCount = jsonStrObj.rowCount;
var results = "";
for(var i=0; i<ROWCOUNT; id='"+jsonStrObj.data[i].EMP_ID+"' ?<div + results="results" { i++)>";
results = results + "<TABLE id=cgv style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; WIDTH: 95%; BORDER-BOTTOM: white 1px solid; BORDER-COLLAPSE: collapse; HEIGHT:26px" rules=rows border=1 rowindex="0" ellspacing="0">";
results = results + "<TBODY><TR class=cgvRow><TD style="WIDTH: 10%" onclick='chkAW(1,"+i +");' align=middle>";
results = results + "<INPUT id='chk"+i+"' type=checkbox></TD>";
results = results + "<TD style="WIDTH: 20%" onclick='chkAW(1,"+i +");' align=middle>"; results = results + jsonStrObj.data[i].EMP_NAME+"</TD>";
results = results + "<TD style="WIDTH: 45%" onclick='chkAW(1,"+i +");' align=middle>"; results = results + jsonStrObj.data[i].DEPT_NAME+"</TD>";
results = results + "<TD style="WIDTH: 25%" onclick='chkAW(1,"+i +");' align=middle>"; results = results + jsonStrObj.data[i].POS_NAME+"</TD>";
results = results + "<TD style="DISPLAY: none; WIDTH: 0%" align=middle>"; results = results + jsonStrObj.data [i].DEPT_ID+"</TD>";
results = results + "<TD style="DISPLAY: none; WIDTH: 0%" align=middle>"; results = results + jsonStrObj.data [i].OFFICE_PHONE+"</TD></TR><DIV></DIV>";
} $('content1').innerHTML = results; }
이런식으로 JSON 형식으로 넘어온 데이터를 HTML모양에 넣고
미리 만들어둔 content1이라는 DIV에 innerHTML로 넣어주면
화면의 가운데에 테이블로 들어가집니다.
그럼 이제 남은 처리는
오른쪽 화살표를 클릭했을때 처리와
왼쪽 화살표 클릭했을때 처리인데요.
이부분의 처리는
사용자정의객체와
Array를 이용해서 처리했어요.
일단 사용자정의 객체를 정의합니다.
function Person(){
this.EMP_ID = "";
this.EMP_NAME = "";
this.DEPT_NAME = "";
this.POS_NAME = "";
this.DEPT_ID = "";
this.OFFICE_PHONE = "";
}그 다음은 오른쪽 화살표 클릭시 처리함수
function imgRight_onclick() {
try{
for(var i = 0; i < rowCount; i++)
{
var tempVal = "chk" + i;
var tempObj = eval(document.getElementById(tempVal));
if(tempObj.checked) {
var tempPersonObj = new Person();
tempPersonObj.EMP_ID = jsonStrObj.data[i].EMP_ID;
tempPersonObj.EMP_NAME = jsonStrObj.data[i].EMP_NAME;
tempPersonObj.DEPT_NAME = jsonStrObj.data[i].DEPT_NAME;
tempPersonObj.POS_NAME = jsonStrObj.data[i].POS_NAME;
tempPersonObj.DEPT_ID = jsonStrObj.data[i].DEPT_ID;
tempPersonObj.OFFICE_PHONE = jsonStrObj.data[i].OFFICE_PHONE;
array1.push(tempPersonObj);
}
}
inputData();
}catch(e){alert(e.message);}
return false;
}checkbox 객체를 받아서 체크여부를 확인한뒤
체크가 되어 있을경우에
person객체에 담고
그 객체를 array1에 push합니다.
그 다음에 inputData를 호출해줍니다.(inputData가 하는일은 아까와 같이 HTML형식으로 DIV에 넣어주는거에요)
그리고 왼쪽화살표 클릭시 array에서 빼버리는건
function imgLeft_onclick() {
for(var i = array1.length-1; i > -1; i--)
{
var tempVal = "chk" + i+"_2";
var tempObj = eval(document.getElementById(tempVal));
if(tempObj.checked) {
array1.splice(i,1);
}
}
inputData();
}체크된 녀석들(없앨 녀석들)을 찾아서
arra1에서 splice해주고 다시 inputData로 뿌려줍니다.
위쪽 화살표 클릭시 순서를 바꿔주는건
일단
function ckbCount(value)
{
try{
var check = 0;
var chkValue = 0;
for(var i = 0; i < array1.length; i++)
{
var tempVal = "chk" + i+"_2";
var tempObj = eval(document.getElementById(tempVal));
if(tempObj.checked) {
check = check+1;
chkValue = i;
}
}
if(check > 1)
{
alert("한번에 한명씩 옮길수 있습니다.");
return false;
}
else if(check == 0)
{
alert("선택된 사람이 없습니다.");
return false;
}
else
{
if(value == 1) imgUp_onclick(chkValue);
else imgDown_onclick(chkValue);
}
}catch(e){alert(e.message);}
return false;
}
이녀석을 이용해 유효성여부를 판단하고 위나 아래로 옮겨줍니다.
(인자로 받는 value는 1일경우는 위로/ 2일경우는 아래로 옮기는걸 구분하기 위한 인자입니다)
이건 위로 옮겨주는 함수
function imgUp_onclick(chkValue) {
if(chkValue == 0)alert("더이상 위로 이동할수 없습니다.");
else
{
var arrayTemp = new Array();
tempPerson = new Person();
tempPerson2 = new Person();
arrayTemp = array1.slice(chkValue, chkValue+1);
tempPerson = arrayTemp[0];
arrayTemp = array1.slice(chkValue-1, chkValue);
tempPerson2 = arrayTemp[0];
array1.splice(chkValue-1, 2, tempPerson, tempPerson2);
inputData();
checkBox(chkValue-1);
}
}이건 아래로
function imgDown_onclick(chkValue) {
if(chkValue == (array1.length-1))alert("더이상 아래로 이동할수 없습니다.");
else
{
var arrayTemp = new Array();
tempPerson = new Person();
tempPerson2 = new Person();
arrayTemp = array1.slice(chkValue, chkValue+1);
tempPerson = arrayTemp[0];
arrayTemp = array1.slice(chkValue+1, chkValue+2);
tempPerson2 = arrayTemp[0];
array1.splice(chkValue, 2, tempPerson2, tempPerson);
inputData();
checkBox(chkValue+1);
}
}글
위 화면은 팝업으로 열리는 화면인데요.
팝업이 되면 왼쪽에 트리형식으로 회사의 모든 부서가 보여집니다.
거기서 부서를 클릭하면 가운데 화면에. 그 부서 사람들 목록이 보여지고
그 목록에서 선택후 오른쪽 화살표모양을 클릭하면 오른쪽 끝화면으로 선택된 목록이 이동되는 화면이에요.
가운데 목록은 부서를 선택할때 마다 그 부서 사람들만 보여지고
오른쪽끝 화면은 가운데 화면에서 추가한 사람들 목록이 계속 쌓이게 되죠.
오른쪽끝 화면에서 선택후 왼쪽 화살표를 클릭하면 목록에서 지워지구요
OK버튼을 클릭하면 그 사람들 목록을 부모창에 던저줍니다.
그리고 위아래 화살표를 누르면 오른쪽끝 화면에서 사람들의 순서를 바꿔줍니다.
처음에 이 작업들을 다 서버쪽에서 처리를 하고 다시 보여주는 형식으로 했었는데.
속도가 너무 안나오더라구요
(살짝 살짝 딜레이가 느껴지는게.. ㅠㅠ)
그래서 찾은(과장님이 가르쳐준) 방법이 JSON을 이용해서 데이터를 처리하는 방법인데요.
이 방법을 사용하면 처음에 부서를 선택했을때만 한번 DB에서 데이터를 가져온후에
나머지 처리는 다 스크립트에서 처리해 줍니다.
확실히 속도는 빨라지더라구요.
방법은 어렵지 않아요.
부모창을 P, 자식창(위의 화면)을 C, 파일처리를 위한 창을 F라고 하면
P에서 C를 팝업시킨 후에
C에서 부서를 클릭하면 F페이지를 호출해서 DB접속후 결과 DataSet을 JSON형식으로 C에 돌려주면
그걸 가지고 C에서 처리를 해주는 겁니다.
자세한건 다음글에서~
RECENT COMMENT