js_javascript 기술로 구현된 기부 관리의 전체 예
이 기사의 예에서는 js 기부 관리의 전체 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.
index.html 페이지는 다음과 같습니다.
http://www.w3.org/1999/xhtml">
<스크립트 유형="텍스트/자바스크립트"> //기부 단위 배열
var listOrgs = [
{ "id": "1", "comName": "원 펀드" },
{ "id": "2", "comName": "쑹칭링 기금" },
{ "id": "3", "comName": "Tzu Chi Foundation" },
{ "id": "4", "comName": "적십자" },
{ "id": "5", "comName": "늑대 토템" }
];
//listOrgs 배열 객체에 익명 메소드를 동적으로 추가합니다
listOrgs.getOrgsById = 함수(id) {
for (var i = 0; i < listOrgs.length; i ) {
If (listOrgs[i].id == id) {
Return listOrgs[i];//객체 반환
~ ~ };
//기부 데이터 배열
var listData = [
{ "id": "1", "perName": "성룡", "orgId": "1", "money": "10000", "date": "2012-3-3" },
{ "id": "2", "perName": "Jet Li", "orgId": "2", "money": "10000", "date": "2012-3-3" },
~ ~ Guangbiao", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "4", "perName": "Hu Jintao", "orgId": "1", "money": "10000", "date": "2012-3-3" },
{ "id": "5", "perName": "zhouxingchi", "orgId": "2", "money": "10000", "date": "2012-3-3" },
{"ID": "6", "Pername": "Dawn", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{ "id": "7", "perName": "늑대인간", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "8", "perName": "Crazy Devil", "orgId": "3", "money": "10000", "date": "2012-3-3" },
{ "id": "9", "perName": "三Crazy", "orgId": "3", "money": "10000", "date": "2012-3-3" }
];
//페이징 쿼리 배열
listData.fenyeQuery = 함수(pageNow, pageSize) {
var res = new Array()
//1. pageSize 5에 따르면 첫 번째 페이지는 listData[0]-listData[4], 두 번째 페이지는 listData[5]-listData[9]
//3페이지는 listData[10]-listData[14]입니다.
var start = (pageNow - 1) * pageSize
var end = listData.length > (pageNow * pageSize) ? (pageNow * pageSize) : listData.length;
for (var i = start ; i < end; i ) {
res[res.length] = 목록데이터[i];
}
해상도를 반환;
};
listData.queryByOrId = 함수(orid) {
var arr = 새로운 배열();
for (var i = 0; i < listData.length; i ) {
if (listData[i].orgId == orid) {
arr[arr.length] = 목록데이터[i];
}
}
반환 도착;
};
listData.idNum = listData.length;
listData.addRec = function(rec) {
목록데이터.idNum ;
var newRec = { "id": listData.idNum, "perName": rec.perName, "orgId": rec.orgId, "money": rec.money, "date": rec.date };
listData[listData.length] = newRec;
newRec를 반환합니다.
};
listData.updateRec = function(obj) { //데이터 행 삭제 함수 DelObj(obj) {
~
trOrgName.innerHTML = (listOrgs.getOrgsById(obj.orgId)).comName window.onload = function() { //새 버튼에 이벤트 바인딩 //이전 페이지에 이벤트 바인딩
for (var i = 0; i < listData.length; i ) {
If (listData[i].id = obj.id) {
listData[i] = obj
휴식
~
~
};
//인격 취소 여부를 감지하는 전역 변수를 정의합니다
var isCancelUpdate = false;
//3개의 텍스트 입력 컨트롤 정의
var InputPerName = document.createElement("input")
InputPerName.type = "텍스트"
var InputMoney = document.createElement("input")
InputPerName.type = "텍스트"
var InputDate = document.createElement("input")
InputPerName.type = "텍스트"
var SeleteOrg = document.createElement("select")
listData.delRecById = 함수(id) {
for (var i = 0; i < listData.length; i ) {
If (listData[i].id == id) {
//삭제
~
1. 이 ID가 있는 위치부터 시작하여 뒤쪽의 모든 요소를 하나로 이동합니다
~ >
for (var j = i; j < listData.length - 1; j ) {
목록데이터[j] = 목록데이터[j 1]
~
~
~
listData.length = listData.length - 1;
};
//텍스트를 입력 텍스트 상자로 변경
함수 txtToInput(tdName, inputName) {
tdName.setAttribute("oldValue", tdName.innerHTML);//원본 콘텐츠를 먼저 저장하고 취소한 경우 복원
inputName.value = tdName.innerHTML
tdName.appendChild(inputName)
tdName.removeChild(tdName.firstChild);
~
함수 txtToSelect(tdName, selObj) {
tdName.appendChild(selObj)
tdName.removeChild(tdName.firstChild);
selObj.value = tdName.getAttribute("orgId")
~
함수 선택기텍스트(tdName) {
var orid = SeleteOrg.value;
var orgName = listOrgs.getOrgsById(orid).comName
// tdName.setAttribute("orgId", SeleteOrg.value)
tdName.innerHTML = orgName
~
//입력을 다시 텍스트로 변환
함수 InputToTxt(tdName, inputName) {
//취소를 클릭하면
If (isCancelUpdate) {
tdName.innerHTML = tdName.getAttribute("oldValue")
반품
~
//수정 내용을 확인하려면 클릭하세요
tdName.innerHTML = inputName.value
~
//선택 컨트롤을 다시 텍스트로 변경
함수 seleToTxt(tdName, selName) {
// tdName.appendChild(selName)
var orgId = SeleteOrg.value;
//이전 삭제
tdName.innerHTML = (listOrgs.getOrgsById(orgId)).comName
~
//수정 취소
함수 CancelUp(obj) {
IScanceelupDate = TRUE; // 취소하려면 클릭하세요
doCancel(obj)
|
~
함수 doCancel(obj) {
var trCur = obj.parentElement.parentElement;
var tds = trCur.childNodes
//원본 td(속성에 저장된) 아래의 모든 값을 사용합니다.
tds[1].innerHTML = tds[1].getAttribute("oldValue")
tds[2].innerHTML = listOrgs.getOrgsById(tds[2].getAttribute("orgId")).comName
tds[3].innerHTML = tds[3].getAttribute("oldValue")
tds[4].innerHTML = tds[4].getAttribute("oldValue")
tds[5].innerHTML = "삭제 수정< ;/a>";
// isCancelUpdate = false
//취소 성공 확인 후 trCur를 null로 설정
trCur = null
~
var trCur = null
함수 UpObj(obj) {
If (trCur != null) {
// 수정을 취소하려면 수정중인 상태임을 설명
~ ~ isCancelUpdate = true;
//해당 줄 편집 취소
doCancel(trCur.childNodes[5].firstChild);//trCur.childNodes[5].firstChild, 이전 줄의 <수정>
~
//현재 행 가져오기
trCur = obj.parentElement.parentElement
var tds = trCur.childNodes
//기부자 입력 수정
txtToInput(tds[1], InputPerName)
//양
txtToInput(tds[3], InputMoney)
> // 기부일
txtToInput(tds[4], InputDate)
//아래로 당겨 단위 선택
txtToSelect(tds[2], SeleteOrg)
//취소하려면 링크를 수정하세요
tds[5].innerHTML = "확인 취소< ;/a>";
~
//수정 확인
함수 doUpObj(obj) {
|
trCur = obj.parentElement.parentElement
//1. 배열에서 해당 레코드를 수정합니다
var rec = { "id": trCur.childNodes[0].innerHTML, "perName": trCur.childNodes[1].childNodes[0].value, "orgId": trCur.childNodes[2].childNodes[0] .value, "money": trCur.childNodes[3].childNodes[0].value, "date": trCur.childNodes[4].childNodes[0].value };
//ListData의 해당 레코드를 수정하는 메서드를 호출합니다
listData.updateRec(rec)
//2. 테이블의 레코드를 수정합니다
InputToTxt(trCur.childNodes[1], InputPerName)
seleToTxt(trCur.childNodes[2], SeleteOrg)
InputToTxt(trCur.childNodes[3], InputMoney)
InputToTxt(trCur.childNodes[4], InputDate)
trCur.childNodes[5].innerHTML = "삭제 ";
//trCur.childNodes[2].setAttribute("orgId", SeleteOrg.value)
//수정 성공 확인 후 trCur를 null로 설정
trCur = null
}
//배열에서 해당 배열을 삭제합니다
//1. 선택한 행을 가져오려면
var curTr = obj.parentElement.parentElement;
//2. 첫 번째 열에서 id 값을 가져옵니다.
var delId = curTr.cells[0].innerHTML
// window.alert(delId)
//3. id(배열의 listData)를 기준으로 레코드 삭제
listData.delRecById(delId)
//4. 테이블 뷰에 표시된 행을 삭제합니다
>
}
함수 젤(id) {
//1. 유닛 이름 바인딩 쿼리 selEle is: selet 요소 노드
함수 LoadOrgList(selEle) {
for (var i = 0; i < listOrgs.length; i ) {
var opt = new Option(listOrgs[i].comName, listOrgs[i].id)
selEle.options.add(opt)
~
~
//2. 테이블 바인딩 및 테이블과 listData 바인딩 방법
함수 LoadDataList() {
//for (var i = 0; i < listData.length; i ) {
추가 Row(listData[i]);
//페이지 표시
페이지 표시()
함수 addRow(obj) {
var trnew = gel("tbList").insertRow(-1)
var tdnew = trnew.insertCell(-1);
tdnew.innerHTML = obj.id
trnew.insertCell(-1).innerHTML = obj.perName
var trOrgName = trnew.insertCell(-1)
trnew.insertCell(-1).innerHTML = obj.money
trnew.insertCell(-1).innerHTML = obj.date
trnew.insertCell(-1).innerHTML = "삭제 수정";
}
//바인딩 쿼리
LoadOrgList(gel("selSearchOrg"))
//기부금 수령자 바인딩
LoadOrgList(gel("selAddOrg"))
LoadOrgList(SeleteOrg)
//테이블과 listData 바인딩
LoadDataList()
gel("btnAdd").onclick = function() {
If ((!(gel("txtName").value)) || (!(gel("txtMoney").value) || (!(gel("txtDate").value)))) {
Alert("입력값은 비워둘 수 없습니다.")
반품
~
//1. 입력 콘텐츠를 가져와서 객체로 패키징합니다(listData 형식에 따라)
var arr = { "perName": gel("txtName").value, "orgId": gel("selAddOrg").value, "money": gel("txtMoney").value, "date": gel(" txtDate").value };
//2. 목록 데이터 배열에 추가
var res = listData.addRec(arr)
//3. 테이블에 표시
var trnew = gel("tbList").insertRow(-1)
> + ,,,,,, in in in in, in, in, in, in, ... in, - in, ...
trnew.insertCell(-1).innerHTML = res.perName
var tdOrg = trnew.insertCell(-1)
tdOrg.setAttribute("orgId", res.orgId)
tdOrg.innerHTML = listOrgs.getOrgsById(res.orgId).comName
> > 이전 버전으로 수신 예정 trnew.insertCell(-1).innerHTML = res.money
> "에 포함되지 않음, trnew.insertCell(-1) .innerHTML = res.date
trnew.insertCell(-1).innerHTML = "삭제 수정";
};
//쿼리 버튼에 이벤트 바인딩
gel("btnSearch").onclick = 함수 () {
If (gel("selSearchOrg").value == -1) {
반품
~
//1. 쿼리할 기부 단위의 orgid를 가져옵니다
var orgId = gel("selSearchOrg").value;
//2. ListData 배열의 orgid를 기반으로 쿼리할 메서드를 정의하고 여기에서 호출합니다.
var arrRes = listData.queryByOrId(orgId)
//3. 디스플레이에서 이전 테이블 데이터를 제거하고, 아래에서 위로 디스플레이를 지워야 합니다.
var trs = gel("tbList").rows
for (var j = trs.length-1; j>0; j--) {
gel("tbList").deleteRow(j)
~
//4. 새로운 데이터 arrRes 표시
for (var i = 0; i < arrRes.length; i ) {
addRow(arrRes[i])
~
}
gel("btnprePage").onclick = function() {
If (pageNow > 1) {
페이지지금--;
showPage()
|
Alert("이미 첫 페이지입니다!")
~
};
//이벤트를 다음 페이지에 바인딩
gel("btnnextPage").onclick = 함수 () {
If(pageNow
showPage()
~
~
Alert("마지막 페이지입니다!")
~
};
};
var pageNow = 1;
var 페이지 크기 = 5
함수 showPage() {
var trs = gel("tbList").rows
for (var j = trs.length - 1; j > 0; j--) {
gel("tbList").deleteRow(j)
~
//1. pageNow 및 pageSize
를 기반으로 배열을 반환합니다.
var res = listData.fenyeQuery(pageNow, pageSize)
for (var i = 0; i < res.length; i ) {
addRow(res[i])
~
~
~ >
~ <옵션 값="-1">--선택하세요--< /옵션>
~
捐赠人：
受捐单位：
| 序号 | 捐赠人 | 受捐单位 | 金额 | 受捐日期 | 操작품 |
