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);

    }

}