<?
$data = "[";
$data .= "{" . "\"no\" : '1793', \"gw_user_info_no\" : '230',\"gw_board_info_no\" : '43',\"title\" : '[메신저] -제안- 채팅 저장 기능 업글',\"name\" : '이정훈',\"readnum\" : '9',\"write_datetime\" : '2009-01-12 11:07:23',\"write_date\" : '09-01-12',\"new_img\" : 'Y',\"poll_img\" : 'N',\"hidden_key\" : 'N',\"depth\" : '0',\"del_flag\" : 'N',\"board_name\" : '메신저 버그/제안',\"board_type\" : 'N', \"attach_cnt\" : '0', \"reply_cnt\" : '0', \"down_cnt\" : '', \"startPage\" : '2', \"current_user_level\" : '2'" . "},";
$data .= "{" . "\"no\" : '1793', \"gw_user_info_no\" : '230',\"gw_board_info_no\" : '43',\"title\" : '[메신저] -제안- 채팅 저장 기능 업글',\"name\" : '이정훈',\"readnum\" : '9',\"write_datetime\" : '2009-01-12 11:07:23',\"write_date\" : '09-01-12',\"new_img\" : 'Y',\"poll_img\" : 'N',\"hidden_key\" : 'N',\"depth\" : '0',\"del_flag\" : 'N',\"board_name\" : '메신저 버그/제안',\"board_type\" : 'N', \"attach_cnt\" : '0', \"reply_cnt\" : '0', \"down_cnt\" : '', \"startPage\" : '2', \"current_user_level\" : '2'" . "},";
$data .= "{" . "\"no\" : '1793', \"gw_user_info_no\" : '230',\"gw_board_info_no\" : '43',\"title\" : '[메신저] -제안- 채팅 저장 기능 업글',\"name\" : '이정훈',\"readnum\" : '9',\"write_datetime\" : '2009-01-12 11:07:23',\"write_date\" : '09-01-12',\"new_img\" : 'Y',\"poll_img\" : 'N',\"hidden_key\" : 'N',\"depth\" : '0',\"del_flag\" : 'N',\"board_name\" : '메신저 버그/제안',\"board_type\" : 'N', \"attach_cnt\" : '0', \"reply_cnt\" : '0', \"down_cnt\" : '', \"startPage\" : '2', \"current_user_level\" : '2'" . "},";
$data .= "{" . "\"no\" : '1793', \"gw_user_info_no\" : '230',\"gw_board_info_no\" : '43',\"title\" : '[메신저] -제안- 채팅 저장 기능 업글',\"name\" : '이정훈',\"readnum\" : '9',\"write_datetime\" : '2009-01-12 11:07:23',\"write_date\" : '09-01-12',\"new_img\" : 'Y',\"poll_img\" : 'N',\"hidden_key\" : 'N',\"depth\" : '0',\"del_flag\" : 'N',\"board_name\" : '메신저 버그/제안',\"board_type\" : 'N', \"attach_cnt\" : '0', \"reply_cnt\" : '0', \"down_cnt\" : '', \"startPage\" : '2', \"current_user_level\" : '2'" . "},";
$data .= "{" . "\"no\" : '1793', \"gw_user_info_no\" : '230',\"gw_board_info_no\" : '43',\"title\" : '[메신저] -제안- 채팅 저장 기능 업글',\"name\" : '이정훈',\"readnum\" : '9',\"write_datetime\" : '2009-01-12 11:07:23',\"write_date\" : '09-01-12',\"new_img\" : 'Y',\"poll_img\" : 'N',\"hidden_key\" : 'N',\"depth\" : '0',\"del_flag\" : 'N',\"board_name\" : '메신저 버그/제안',\"board_type\" : 'N', \"attach_cnt\" : '0', \"reply_cnt\" : '0', \"down_cnt\" : '', \"startPage\" : '2', \"current_user_level\" : '2'" . "}";
$data .= "]";
$return_data = "{";
$return_data .= "\"resultCode\" : 'OK',";
$return_data .= "\"row\" : '5',";
$return_data .= "\"column\" : '5',";
$return_data .= "\"result\" : " . $data . ",";
$return_data .= "\"message\" : '',";
$return_data .= "\"layerID\" : ''";
$return_data .= "}";
echo($return_data);
?>
view xml definition
<?xml version="1.0" encoding="UTF-8" ?>
<gabia>
<tables>
<notice>
<rowCss>noticeRow1</rowCss>
<rowCss>noticeRow2</rowCss>
<rowCss>noticeRow3</rowCss>
<row><![CDATA[noticeTitle^^<a href="#no#">#title#</a>]]></row>
<row><![CDATA[noticeAuthor^^#name#]]></row>
<row><![CDATA[noticeCountHead^^#readnum#]]></row>
<row><![CDATA[noticeDateHead^^#write_date#]]></row>
<row><![CDATA[noticeBoardHead^^#board_name#]]></row>
</notice>
</tables>
</gabia>
control class
/********************************************************************************
참조 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=51107&sca=%BD%BA%C5%A9%B8%B3%C6%AE&sfl=wr_subject&stx=xml&sop=and
prototype을 이용한 xml parser class
********************************************************************************/
var xmlParser = Class.create();
xmlParser.prototype = {
initialize: function()
{
},
getNode: function (xml, tag)
{ // 싱글노드
return xml.getElementsByTagName(tag)[0];
},
getNodeAll: function (xml, tag)
{ // 멀티노드
return xml.getElementsByTagName(tag);
},
getValue: function (xml)
{ // 노드값 가져오기
try
{
return xml.firstChild.nodeValue;;
}
catch(E)
{
alert(E);
}
}
};
/********************************************************************************
ajax를 이용한 json data를 parsing해서 table을 그리는 class
작성자 : 이정훈 (ljhoon@gabia.com)
작성일 : 2009.01.13
********************************************************************************/
var tableXML = "http://local.inmail.co.kr/test.xml";
/********************************************************************************
stCell : td를 구성하기 위한 기본 정보를 갖게 되는 구조체 성격의 Class
만약 td에 정의 해야 할 속성이 늘어나면 xml에 ^^ 구분자를 이용해서
추가를 하고 stCell class에도 속성을 추가 해 주면 된다.
********************************************************************************/
var stCell = Class.create();
stCell.prototype = {
cssName : null,
cellData : null,
initialize : function(pData)
{
if (pData.length < 1)
{
this.setNullData();
return;
}
this.cssName = pData[0];
this.cellData = pData[1];
},
getCss : function()
{
return this.cssName;
},
getData : function()
{
return this.cellData;
},
setData : function(pValue)
{
this.cellData = pValue;
},
setNullData : function()
{
this.cssName = "nodata";
this.cellData = "nodata";
}
};
/********************************************************************************
stRow : td 배열을 갖게 되는 row 구조체 class
row별 배경색이 다른 경우를 위해 css이름 속성을 갖는다.
********************************************************************************/
var stRow = Class.create();
stRow.prototype = {
m_stCells : null,
m_oCss : null,
length : 0,
initialize : function()
{
this.m_oCss = new Array();
this.m_stCells = new Array();
},
insert : function(pCell)
{
this.m_stCells[this.m_stCells.length] = pCell;
this.length++;
},
setCss : function(pCss)
{
if (typeof(pCss) != "Object")
this.m_oCss[this.m_oCss.length] = pCss;
else if (pCss.length > 1)
{
var cssCount = pCss.length;
for (var i=0 ; i<cssCount ; ++i)
this.m_oCss[cssCount + i] = pCss[i];
}
},
getCell : function(pIndex)
{
if (this.m_stCells.length >= pIndex)
{
return this.m_stCells[pIndex];
}
},
getColumnCount : function()
{
return this.m_stCells.length;
},
getCssCount : function()
{
return this.m_oCss.length;
},
getCss : function(pIndex)
{
if (this.m_oCss.length > pIndex)
return this.m_oCss[pIndex];
else
return this.m_oCss[0];
}
};
/********************************************************************************
Table : stRow, stCell을 이용해 실제 Table row를 그리고 구조 정보 xml을 읽어온다.
********************************************************************************/
var Table = Class.create();
Table.prototype = Object.extend (new xmlParser, {
m_nCol : 0,
m_nRow : 0,
m_oData : null,
m_oTableID : null,
m_oRowTemplate : null,
m_oDefaultRowCss : null,
xmlBuffer : null,
m_oRows : null,
m_bHeaderExist : true,
/********************************************************************************
pData : json data
pTableID : target table id
pHeaderExist : 테이블 column별 제목이 있다면 true 없다면 false.
table을 그리기 전에 true이면 1줄을 남기고 없다면 모든 row를 지운다.
********************************************************************************/
initialize : function(pData, pTableID, pHeaderExist)
{
this.m_nColumn = pData.row;
this.m_nRow = pData.column;
this.m_oData = pData.result;
this.m_oTableID = pTableID;
this.m_bHeaderExist = pHeaderExist;
this.loadXML();
},
/********************************************************************************
table 구조 xml을 읽어 오는 부분. 동기로 처리 했음.
********************************************************************************/
loadXML : function()
{
new Ajax.Request(tableXML, {
asynchronous: false,
method: "get",
onSuccess: function(xmlHttp)
{
try
{
xmlBuffer = xmlHttp.responseXML;
return true;
}
catch(E)
{
xmlBuffer = null;
alert("XML Load Fail : " + E);
return false;
}
},
onFailure : function (request)
{
xmlBuffer = null;
alert("Table Template XML Request Fail");
return false;
}
});
},
/********************************************************************************
xml에 정의된 각 td별 설정을 읽어와 rowTemplate 객체를 만든다.
row별 css정보도 여기서 설정한다. css가 명시된 수 만큼 적용된다.
********************************************************************************/
getRowTemplate : function()
{
if (xmlBuffer == null)
return ("table row Info is null");
else
{
try
{
this.m_oRows = null;
this.m_oRows = new stRow();
var objectNode = this.getNode(xmlBuffer, this.m_oTableID);
var cssTemp = this.getNodeAll(objectNode, "rowCss");
for(var i=0 ; i<cssTemp.length ; ++i)
this.m_oRows.setCss(this.getValue(cssTemp[i]));
var rowTemp = this.getNodeAll(objectNode, "row");
for(var i=0 ; i<rowTemp.length ; ++i)
{
var templateValue = this.getValue(rowTemp[i]);
this.m_oRows.insert(new stCell(templateValue.split("^^")));
}
}
catch(E)
{
alert("Node select fail : " + E);
return;
}
}
},
/********************************************************************************
실제로 table row를 생성 하는 부분
row를 추가 하기 전에 기존에 그려진 모든 row를 지운다.
json의 인덱스 명은 xml에서 명시한 delimiter명과 같아야 한다.
********************************************************************************/
insertRow : function()
{
if ($(this.m_oTableID) == null)
{
alert("Base Table is null.");
return;
}
if ($(this.m_oTableID).rows.length > 1)
{
if (this.m_bHeaderExist)
{
for(var i=($(this.m_oTableID).rows.length-1) ; i>0 ; --i)
$(this.m_oTableID).deleteRow(i);
}
else
{
for(var i=($(this.m_oTableID).rows.length-1) ; i>=0 ; --i)
$(this.m_oTableID).deleteRow(i);
}
}
this.getRowTemplate();
for(var i=0 ; i<this.m_nRow ; ++i)
{
var nLoopCount = 0;
var row = $(this.m_oTableID).insertRow(-1);
row.className = this.m_oRows.getCss( (i+1)%this.m_oRows.getCssCount() );
for (var j=0 ; j<this.m_oRows.length ; ++j)
{
var c = row.insertCell(-1);
var tempCell = this.m_oRows.getCell(nLoopCount).getData();
for(var tempIndex in this.m_oData[i])
{
var delimiter = new RegExp("#" + tempIndex + "#", "ig");
tempCell = tempCell.replace(delimiter, this.m_oData[i][tempIndex]);
}
c.innerHTML = tempCell;
c.className = this.m_oRows.getCell(nLoopCount).getCss();
nLoopCount++;
}
}
}
});
구동 html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script language="javascript" type="text/javascript" src="/scripts/prototype.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/ajaxBasic.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/simpleXml.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/table.js"></script>
<style type="text/css">
table, div { float:left; position:relative; display:inline-block; padding:0; margin:0; }
#list { width:800px; border:solid 1px #dddddd; }
#list #notice {width:600px; font-size:11px; font-family : 맑은고딕, Lucida Grande, Verdana, Sans-serif;}
#list #notice tr { height:20px; }
#list #notice .noticeHeader {font-weight:bold; text-align:center;}
#list #notice .noticeRow1 {border-bottom:solid 1px #dddddd; }
#list #notice .noticeRow2 {border-bottom:solid 1px #dddddd; background-color:#dddddd; }
#list #notice .noticeRow3 {border-bottom:solid 1px #dddddd; background-color:#aaaaaa; }
#list #notice .noticeTitleHead {width:250px;}
#list #notice .noticeDateHead {width:75px;}
#list #notice .noticeCountHead {width:75px; text-align:right;}
#list #notice .noticeAuthorHead {width:100px;}
#list #notice .noticeBoardHead {width:100px;}
</style>
</head>
<body>
<div>
<div id="list">
<table id="notice">
<tr class="noticeHeader"><td class="noticeTitleHead">제목</td><td class="noticeAuthorHead">등록자</td><td class="noticeCountHead">조회수</td><td class="noticeDateHead">작성일</td><td class="noticeBoardHead">게시판</td></tr>
</table>
</div>
</div>
<input type="button" value="test" onclick="getData();">
<script language="javascript">
function getData()
{
getAjaxData('/test.php', "", rowAppend);
}
function rowAppend(pValue)
{
var objTable2 = new Table(pValue, "notice", false);
objTable2.insertRow();
}
</script>
</body>
</html>
Posted by SADBLUE
