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 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                 res[res.length] = 목록데이터[i]; 
            } 
            해상도를 반환; 
        }; 
 
        listData.queryByOrId = 함수(orid) { 
            var arr = 새로운 배열(); 
            for (var i = 0; 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) {
for (var i = 0; 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 If (listData[i].id == id) {
//삭제 ~ 1. 이 ID가 있는 위치부터 시작하여 뒤쪽의 모든 요소를 ​​하나로 이동합니다
~ >                                                                   for (var j = i; 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
         } 

//데이터 행 삭제

함수 DelObj(obj) {
//배열에서 해당 배열을 삭제합니다
//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) {

                return document.getElementById(id)

~
//1. 유닛 이름 바인딩 쿼리 selEle is: selet 요소 노드
함수 LoadOrgList(selEle) {
for (var i = 0; i                    var opt = new Option(listOrgs[i].comName, listOrgs[i].id)
                   selEle.options.add(opt)
~   ~ //2. 테이블 바인딩 및 테이블과 listData 바인딩 방법

함수 LoadDataList() {
//for (var i = 0; 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)

              trOrgName.setAttribute("orgId", obj.orgId)

               trOrgName.innerHTML = (listOrgs.getOrgsById(obj.orgId)).comName
                trnew.insertCell(-1).innerHTML = obj.money
                trnew.insertCell(-1).innerHTML = obj.date
trnew.insertCell(-1).innerHTML = "삭제 수정";
         } 

window.onload = function() {
//바인딩 쿼리
            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                      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                     addRow(res[i])
~   ~ 스크립트>
머리>

>            > 기부대상
~ > ~                                                                                               --선택하세요-- ~             
       

 
       

 
            捐赠人： 
            受捐单位： 
             
            선택> 
            金额： 
            受捐日期： 
           
       

 
       

 
             
                 
                 
                 
                 
                 
                 
             
        테이블> 
     
 

序号

捐赠人

受捐单位

金额

受捐日期

操작품