그리드(GRID)에서 액셀 데이터 업로드 처리(2) - 프로그래스 바를 이용하여 업로드하기

이전작업에 프로그래스바를 붙여서 좀더 인식성을 높일수 있다.

아래 사이트를 통해 별도 기능없이 테그를 통해 프로그래스 바를 만들었다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress

<progress> - HTML: Hypertext Markup Language | MDN

• 소스를 보면 태그를 추가하고 업로드 완료시 프로그래스바 건수를 증가시켜 보여준다.
• 프로그래스바 테크
• <progress id="updatePer" max="100" value="0">  </progress>
• 프로그래스바 카운트 증가.
•  $("#updatePer").attr("value",count);
• 아래 전체소스에서 확인 가능하다.

 

 
업로드건수 :<input type="text" size=5   style = "text-align:right;padding:1;"   name="updateCount" id="updateCount" value="0"  >

<input type="button" value="중복제거"  onclick="doubleClear()">

<input type="button" value="엡로드하기"  onclick="uploadSelectData()">
 

 <input type="button" value="닫기"   onclick="window.close()">
 
<progress id="updatePer" max="100" value="0">  </progress>


<form method="post" style = "text-align:center;padding:1;"  action="">
	<textarea name="err_log" id="err_log" rows="10" cols="100"></textarea>
</form>



function uploadSelectData(){

   var arr = firstGrid.getList("selected");

   if(arr.length == 0) {
       alert("업로드할 데이터를 선택해주세요");
       return;
   } else {

       $("#updatePer").attr("max",arr.length);

        if(confirm(arr.length+"건을 업로드 합니다.")){

                   var count =1;

                   $.each(arr, function (index, item) {

                           setTimeout(() => {
                                $.ajax({
                               type: "POST",
                               url: "./sheetmateDao.php?tableName=saveSheet&site=<?echo $msiteName ?>&MENU_ID=<?echo $MENU_ID ?>",
                               scriptCharset: "utf-8" ,
                                contentType: "application/x-www-form-urlencoded; charset=UTF-8", 
                               //폼 데이터
                               data:  item ,
                             //  async: false,
                               //응답 데이터 포맷
                               dataType:"json",
                               //성공시
                               success: function(obj) {	
                                   console.log(index);
                                   $("#updateCount").val(count++);
                                   $("#updatePer").attr("value",count);
                                   console.log( item);
                                   item.message="업로드완료";

                                firstGrid.updateRow(item,  item.__index);

                               },
                               error: function(request, status, error) {
                                   item.message="error:"+request.responseText;
                                  $("#err_log").val("error:"+request.responseText);
                               }
                          });


                               console.log("this is the "+index+" message")




                               }, 500*index);

               });
        }
   }
//if(arr.length ==0)	 arr =  firstGrid.getList();
}