원래 목적은 fund 정보를 웹에서 관리하기 위해 만들려 한것인데...
미완성 프로젝트다..
엑셀에선 간단하던 수식들을 웹으로 옮기려니 만만치 않더라 ㅡㅡ;
소스에는 포함된 내용들은 아래와 같다.
- Prototype Javascript Lib 사용
- Javascript Calendar Javascript Lib 사용(한국어 처리 부분 소스 약간 수정)
- 멀티 Ajax 요청 처리
- 요청 처리중일때 모래 시계 보여주기
- Msg 출력을 동적으로
- select Object에 요청 받은 내용 동적으로 append
common.js 보기
common.js
// 결과를 보여줄 영역을 동적 생성
function getMsgElement()
{
var id = 'result';
var element = $(id);
if ( !element || Object.isUndefined(element) )
{
element=document.createElement('DIV');
element.setAttribute('ID', id);
document.body.appendChild(element);
}
return element;
};
// 에러 메시지 출력
function writeErrorMsg(msg)
{
var eResult = getMsgElement();
var eError = document.createElement('div');
eError.className='error';
eResult.appendChild(eError);
Element.insert(eError, Object.toHTML(msg + '<br/>'));
};
// 일반 메시지 출력
function writeMsg(msg)
{
var eResult = getMsgElement();
Element.insert(eResult, Object.toHTML(msg + '<br/>'));
};
// 처리중 모래시계를 element 앞에 삽입
function beginWaiting(element)
{
var elementImage;
var next = element;
var id = element.id + 'WaitingImage';
element = $(id);
if ( !element || Object.isUndefined(element) )
{
element = document.createElement('IMG');
element.setAttribute('id', id);
element.setAttribute('src', '../images/waiting.gif');
next.parentNode.insertBefore(element, next);
}
};
// 처리중 모래시계를 지운다.
function endWaiting(element)
{
var parent = element.parentNode;
var id = element.id + 'WaitingImage';
element = $(id);
if ( !element || Object.isUndefined(element) ) return;
parent.removeChild(element);
};
// select에 OPTION 태그를 추가한다.
function addOption(parent, value, text)
{
var element = document.createElement('OPTION');
element.value = value;
element.text = text;
if ( !parent || Object.isUndefined(parent) ) return;
try {
parent.add(element, null); // from standard
} catch(ex) {
parent.add(element); // from IE
}
}
// option용 데이타를 서버 요청(prototype ajax class)
var FillOptions = Class.create();
FillOptions.prototype = {
initialize: function(url, field, key) {
this.url = url;
this.field = field;
this.key = key;
this.tryReq = false;
},
addOption: function(value, text) {
addOption( $(this.field), value, text );
},
beginWaiting: function() {
this.tryReq = true;
beginWaiting($(this.field));
},
endWaiting: function() {
this.tryReq = false;
endWaiting($(this.field));
},
run: function() {
if ( $(this.field).firstChild ) return;
if ( this.tryReq == true )
{
writeErrorMsg('승질은!, 요청 중.. 잠시만 기둘리삼');
return;
}
this.beginWaiting();
new Ajax.Request(this.url,
{
method:'post',
parameters: { field:this.field, key:this.key },
onSuccess:this.onSucc.bind(this),
onFailure:this.onFail.bind(this)
}
);
},
onSucc: function(transport) {
var response = transport.responseText || '';
var list = response.split('\n'); // record separator
if ( list[0] == 'OK' )
{
// callback function 'beforeOption' check
if ( Object.isFunction(parent.beforeOption) )
{
beforeOption($(this.field));
}
for(i=1; i<list.length; i++)
{
var record = list[i].split('\t'); // field separator
this.addOption(record[0], record[1]);
}
// callback function 'afterOption' check
if ( Object.isFunction(parent.afterOption) )
{
afterOption($(this.field));
}
} else {
writeErrorMsg(response);
}
this.endWaiting();
},
onFail: function() {
writeErrorMsg('요청 실패!');
this.endWaiting();
}
};
//오늘 날짜를 리턴 한다.
function getDate()
{
var szResult;
var today=new Date();
szResult = today.getFullYear() + "-";
if ( today.getMonth() < 10 ) szResult += "0" + (today.getMonth() + 1);
else szResult += (today.getMonth() + 1);
szResult += "-";
if ( today.getDate() < 10 ) szResult += "0" + today.getDate();
else szResult += today.getDate();
return szResult;
}
function getMsgElement()
{
var id = 'result';
var element = $(id);
if ( !element || Object.isUndefined(element) )
{
element=document.createElement('DIV');
element.setAttribute('ID', id);
document.body.appendChild(element);
}
return element;
};
// 에러 메시지 출력
function writeErrorMsg(msg)
{
var eResult = getMsgElement();
var eError = document.createElement('div');
eError.className='error';
eResult.appendChild(eError);
Element.insert(eError, Object.toHTML(msg + '<br/>'));
};
// 일반 메시지 출력
function writeMsg(msg)
{
var eResult = getMsgElement();
Element.insert(eResult, Object.toHTML(msg + '<br/>'));
};
// 처리중 모래시계를 element 앞에 삽입
function beginWaiting(element)
{
var elementImage;
var next = element;
var id = element.id + 'WaitingImage';
element = $(id);
if ( !element || Object.isUndefined(element) )
{
element = document.createElement('IMG');
element.setAttribute('id', id);
element.setAttribute('src', '../images/waiting.gif');
next.parentNode.insertBefore(element, next);
}
};
// 처리중 모래시계를 지운다.
function endWaiting(element)
{
var parent = element.parentNode;
var id = element.id + 'WaitingImage';
element = $(id);
if ( !element || Object.isUndefined(element) ) return;
parent.removeChild(element);
};
// select에 OPTION 태그를 추가한다.
function addOption(parent, value, text)
{
var element = document.createElement('OPTION');
element.value = value;
element.text = text;
if ( !parent || Object.isUndefined(parent) ) return;
try {
parent.add(element, null); // from standard
} catch(ex) {
parent.add(element); // from IE
}
}
// option용 데이타를 서버 요청(prototype ajax class)
var FillOptions = Class.create();
FillOptions.prototype = {
initialize: function(url, field, key) {
this.url = url;
this.field = field;
this.key = key;
this.tryReq = false;
},
addOption: function(value, text) {
addOption( $(this.field), value, text );
},
beginWaiting: function() {
this.tryReq = true;
beginWaiting($(this.field));
},
endWaiting: function() {
this.tryReq = false;
endWaiting($(this.field));
},
run: function() {
if ( $(this.field).firstChild ) return;
if ( this.tryReq == true )
{
writeErrorMsg('승질은!, 요청 중.. 잠시만 기둘리삼');
return;
}
this.beginWaiting();
new Ajax.Request(this.url,
{
method:'post',
parameters: { field:this.field, key:this.key },
onSuccess:this.onSucc.bind(this),
onFailure:this.onFail.bind(this)
}
);
},
onSucc: function(transport) {
var response = transport.responseText || '';
var list = response.split('\n'); // record separator
if ( list[0] == 'OK' )
{
// callback function 'beforeOption' check
if ( Object.isFunction(parent.beforeOption) )
{
beforeOption($(this.field));
}
for(i=1; i<list.length; i++)
{
var record = list[i].split('\t'); // field separator
this.addOption(record[0], record[1]);
}
// callback function 'afterOption' check
if ( Object.isFunction(parent.afterOption) )
{
afterOption($(this.field));
}
} else {
writeErrorMsg(response);
}
this.endWaiting();
},
onFail: function() {
writeErrorMsg('요청 실패!');
this.endWaiting();
}
};
//오늘 날짜를 리턴 한다.
function getDate()
{
var szResult;
var today=new Date();
szResult = today.getFullYear() + "-";
if ( today.getMonth() < 10 ) szResult += "0" + (today.getMonth() + 1);
else szResult += (today.getMonth() + 1);
szResult += "-";
if ( today.getDate() < 10 ) szResult += "0" + today.getDate();
else szResult += today.getDate();
return szResult;
}
list.html 보기
list.html
url<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>목록</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="http://newtype.pe.kr/jscalendar-1.0/skins/aqua/theme.css" title="Aqua" />
<script type="text/javascript" src="../js/prototype.js">
/*http://prototypejs.org/*/
</script>
<script type="text/javascript" src="../js/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="../js/jscalendar-1.0/lang/calendar-ko-utf8.js"></script>
<script type="text/javascript" src="../js/jscalendar-1.0/calendar-setup.js"></script>
<script type="text/javascript" src="./common.js"></script>
<script language="javascript">
var isTry = false;
var cName = new FillOptions('./fund_list.php', 'name', 'seq');
var cScope = new FillOptions('./fund_list.php', 'scope', 'scope');
var cType = new FillOptions('./fund_list.php', 'type', 'type');
var cCompany = new FillOptions('./fund_list.php', 'company', 'company');
function beforeOption(oSel)
{
addOption(oSel, "All", "모두" );
}
function init()
{
cName.run();
cScope.run();
cType.run();
cCompany.run();
$('startDate').value = '2005-01-01';
$('endDate').value = getDate();
}
function doRequest()
{
var element = $('timer');
if ( isTry == true )
{
writeErrorMsg("승질은!, 요청중.. 잠시만 기둘리삼");
return;
}
isTry = true;
beginWaiting(element);
new Ajax.Request('./process.php',
{
method:'post',
parameters: { fundpk: $F("name"),
scope: $F("scope"),
type: $F("type"),
company: $F("company"),
startDate: $F("startDate"),
endDate: $F("endDate")
},
onSuccess: function(transport){
var response = transport.responseText || "";
if ( response != "" )
{
Element.insert( $("data"), Object.toHTML(response) );
} else {
writeErrorMsg("요청 결과가 없습니다");
}
endWaiting(element);
isTry = false;
},
onFailure: function(){
writeErrorMsg("Something went wrong...");
endWaiting( $("stateRequest"));
isTry = false;
}
}
);
}
</script>
</head>
<body onLoad="init();">
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<TR height=10><TD></TD></TR>
<TR valign=top><TD align=left>
<TABLE>
<TR>
<TD>펀드명</TD>
<TD><SELECT name="name" id="name"></SELECT>
</TR>
<TR>
<TD>펀드 구분</TD>
<TD><SELECT name="scope" id="scope"></SELECT></TD>
</TR>
<TR>
<TD>납입 방법</TD>
<TD><SELECT name="type" id="type"></SELECT></TD>
</TR>
<TR>
<TD>운용사</TD>
<TD><SELECT name="company" id="company"></SELECT></TD>
</TR>
<TR>
<TD>조회 시작일</TD>
<TD>
<input type="text" name="startDate" id="startDate" size="12">
</TD>
</TR>
<TR>
<TD>조회 종료일</TD>
<TD>
<input type="text" name="endDate" id="endDate" size="12">
</TD>
</TR>
<TR>
<TD align=right><span id=timer></span></TD>
<TD>
<input type="submit" value="조회" onClick="doRequest()">
<input type="button" value="입력" onClick="location.href='./in_trade.html'">
</TD>
</TR>
</TABLE>
<span id="data"></span>
</TD></TR>
</TABLE>
<script type="text/javascript">
Calendar.setup({
inputField : "startDate",
ifFormat : "%Y-%m-%d",
showsTime : false
});
Calendar.setup({
inputField : "endDate",
ifFormat : "%Y-%m-%d",
showsTime : false
});
</script>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>목록</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="http://newtype.pe.kr/jscalendar-1.0/skins/aqua/theme.css" title="Aqua" />
<script type="text/javascript" src="../js/prototype.js">
/*http://prototypejs.org/*/
</script>
<script type="text/javascript" src="../js/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="../js/jscalendar-1.0/lang/calendar-ko-utf8.js"></script>
<script type="text/javascript" src="../js/jscalendar-1.0/calendar-setup.js"></script>
<script type="text/javascript" src="./common.js"></script>
<script language="javascript">
var isTry = false;
var cName = new FillOptions('./fund_list.php', 'name', 'seq');
var cScope = new FillOptions('./fund_list.php', 'scope', 'scope');
var cType = new FillOptions('./fund_list.php', 'type', 'type');
var cCompany = new FillOptions('./fund_list.php', 'company', 'company');
function beforeOption(oSel)
{
addOption(oSel, "All", "모두" );
}
function init()
{
cName.run();
cScope.run();
cType.run();
cCompany.run();
$('startDate').value = '2005-01-01';
$('endDate').value = getDate();
}
function doRequest()
{
var element = $('timer');
if ( isTry == true )
{
writeErrorMsg("승질은!, 요청중.. 잠시만 기둘리삼");
return;
}
isTry = true;
beginWaiting(element);
new Ajax.Request('./process.php',
{
method:'post',
parameters: { fundpk: $F("name"),
scope: $F("scope"),
type: $F("type"),
company: $F("company"),
startDate: $F("startDate"),
endDate: $F("endDate")
},
onSuccess: function(transport){
var response = transport.responseText || "";
if ( response != "" )
{
Element.insert( $("data"), Object.toHTML(response) );
} else {
writeErrorMsg("요청 결과가 없습니다");
}
endWaiting(element);
isTry = false;
},
onFailure: function(){
writeErrorMsg("Something went wrong...");
endWaiting( $("stateRequest"));
isTry = false;
}
}
);
}
</script>
</head>
<body onLoad="init();">
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<TR height=10><TD></TD></TR>
<TR valign=top><TD align=left>
<TABLE>
<TR>
<TD>펀드명</TD>
<TD><SELECT name="name" id="name"></SELECT>
</TR>
<TR>
<TD>펀드 구분</TD>
<TD><SELECT name="scope" id="scope"></SELECT></TD>
</TR>
<TR>
<TD>납입 방법</TD>
<TD><SELECT name="type" id="type"></SELECT></TD>
</TR>
<TR>
<TD>운용사</TD>
<TD><SELECT name="company" id="company"></SELECT></TD>
</TR>
<TR>
<TD>조회 시작일</TD>
<TD>
<input type="text" name="startDate" id="startDate" size="12">
</TD>
</TR>
<TR>
<TD>조회 종료일</TD>
<TD>
<input type="text" name="endDate" id="endDate" size="12">
</TD>
</TR>
<TR>
<TD align=right><span id=timer></span></TD>
<TD>
<input type="submit" value="조회" onClick="doRequest()">
<input type="button" value="입력" onClick="location.href='./in_trade.html'">
</TD>
</TR>
</TABLE>
<span id="data"></span>
</TD></TR>
</TABLE>
<script type="text/javascript">
Calendar.setup({
inputField : "startDate",
ifFormat : "%Y-%m-%d",
showsTime : false
});
Calendar.setup({
inputField : "endDate",
ifFormat : "%Y-%m-%d",
showsTime : false
});
</script>
</body>
</html>
http://www.panghosting.net/~newtype/fund/list.html