[Jquery&JAVA] 엑셀 데이터를 태그값에 삽입 방법 (영상 有)

 

안녕하세요.

오늘은 첨부파일에서 엑셀데이터를 input이나 select 태그의 값에 넣는 방법을 정리해보겠습니다.

 

 

 

구현방식은,

엑셀데이터를 AJAX를 통해 서버에서 읽은 다음 

리스트 형태로 보내서 제이쿼리에서 값을 넣어주는 방식으로 구현해보았습니다.

 

 

 

 

아래는 구현 영상입니다.

 

 

 

 

 

 

 

HTML

 

 

<form method="post" enctype="multipart/form-data" id="excelForm">
    <input type="file" name="atch_file_id" id="atch_file_id" accept=".xlsx, .xls"/>
    <a href="javascript:void(0);" class="btn btn btn-primary btn-lg" onclick="fileUpload(); return false;">엑셀 업로드</a>
    <a href="/downx/ExcelForm.xlsx" class="btn btn btn-primary btn-lg">양식파일 다운로드</a>
</form>
 
 
 
 
 
 
<div class="table-responsive mt-2">
<table id="resTb" class="table tbl_List clone" name="tableStandard">
    <colgroup>
        <col width="5%">
        <col>
        <col width="18%">
        <col width="18%">
        <col width="18%">
        <col width="8%">
    </colgroup>
    <thead>
        <tr>
            <th>NO</th>
            <th>DATA import</th>
            <th>File Name</th>
            <th>Sample</th>
            <th>Group</th>
            <th>DATA 추가</th>
        </tr>
    </thead> 
    <tbody id="MainTbody">
    <input type="hidden" id="tdCount" name="tdCount" />
    <c:set var="k" value="1" />
    <tr id="Td" class="tdCount tableSize">
        <input type="hidden" name="groupIdKey" value="${k}" />
        <td id="tdNo_${k}" class="tdNo">1</td>
        <td>
            <select name="fss_fileType" id="fss_fileType_${k}" class="form-control" style="width:20%;float:left;margin-top:10px;" onchange="chageSelect('${k}')">
                <option value="fastq.gz">fastq.gz</option>
                <option value="fasta">fasta</option>                           
            </select>
            <div class="fastq_${k}">
            &nbsp; R1 : <input type="file" name="f${k}_0" id="f${k}_0" accept=".fastq.gz" style="width:70%;margin-left:10px;"  /><br/>
            &nbsp; R2 : <input type="file" name="f${k}_1" id="f${k}_1" accept=".fastq.gz" style="width:70%;margin-left:10px;" />
            </div>
            <div class="fasta_${k}" style="display:none;">
                <input type="file" name="f${k}_2" id="f${k}_2"  style="width:70%;margin-left:20px;margin-top:10px;"  accept=".fasta"/>
            </div>
        </td>                
        <td><input type="text" name="fss_file_name" id="fss_file_name_${k}" value="" style="width:200px" class="form-control"></td>
        <td><input type="text" name="fss_sample" id="fss_sample_${k}" value="" style="width:200px" class="form-control"></td>
        <td><input type="text" name="fss_group" id="fss_group_${k}" value="" style="width:200px" class="form-control fss_group"></td>
        <td>
            <a href="javascript:void(0);" class="btn  btn  btn-danger btn-sm pmBtn" onclick="addTag2(this); return false;">+</a>
            <a href="javascript:void(0);" class="btn  btn  btn-danger btn-sm pmBtn" onclick="delTag(this); return false;">-</a>
        </td>
    </tr>            
    </tbody>
</table>
</div>
 
 
 
 
 
<div style="display:none;">
    
<table class="table   tbl_List" name="tableStandard">
<colgroup>
    <col width="5%">
    <col>
    <col width="20%">
    <col width="20%">
    <col width="20%">
    <col width="8%">
</colgroup>
<thead>
    <tr>
        <th>NO</th>
        <th>DATA import</th>
        <th>File Name</th>
        <th>Group</th>
        <th>Sample</th>
        <th>DATA 추가</th>
    </tr>
</thead> 
<tbody id="DummyTbody">
 
<tr class="tdCount">
    <input type="hidden" name="groupIdKey" value="0" />
    <td id="tdNo_" class="tdNo">1</td>
    <td>
        <select name="fss_fileType" id="fss_fileType_" class="form-control" style="width:20%;float:left;margin-top:10px;" onchange="chageSelect()">
            <option value="fastq.gz">fastq.gz</option>
            <option value="fasta">fasta</option>
        </select>
        <div class="fastq_">
        &nbsp; R1 : <input type="file" name="f_0" id="f_0" accept=".fastq.gz"  style="width:70%;margin-left:10px;"  /><br/> 
        &nbsp; R2 : <input type="file" name="f_1" id="f_1" accept=".fastq.gz"  style="width:70%;margin-left:10px;" />
        </div>
        <div class="fasta_" style="display:none;">
            <input type="file" name="f_2" id="f_2" accept=".fasta" style="width:70%;margin-left:20px;margin-top:10px;" />
        </div>
    </td>                    
    <td ><input type="text" name="fss_file_name" id="fss_file_name_" value="" style="width:200px" class="form-control"></td>
    <td ><input type="text" name="fss_sample" id="fss_sample_" value="" style="width:200px" class="form-control"></td>
    <td ><input type="text" name="fss_group" id="fss_group_" value="" style="width:200px" class="form-control fss_group"></td>
    <td >
        <a href="javascript:void(0);" class="btn  btn  btn-danger btn-sm pmBtn" onclick="addTag2(this); return false;">+</a>
        <a href="javascript:void(0);" class="btn  btn  btn-danger btn-sm pmBtn" onclick="delTag(this); return false;">-</a>
    </td>
</tr>
 
</tbody>
</table>
</div>

 

여기서 가장 중요한 부분은 가장 위에있는 form부분입니다.

첨부파일을 서버에 보내주기 위한 작업인거죠.

 

form에 excelForm이란 id값을 줍니다.

그리고 파일을 보내기 위함으로 반드시 enctype="multipart/form-data" 가 설정되어야 합니다.

그리고 엑셀 업로드 부분에 onclick 함수 설정을 하여 버튼을 누를 경우 함수가 작동되도록 합니다.

 

여기서는 두개의 테이블이 있는데,

하나는 화면에 표출되는 테이블과

하나는 테이블 추가가 될때 사용되는 테이블입니다.

 

표출되는 테이블에서의 tbody 부분에 아디기 값을 설정 (MainTbody)해 주고,

복사될 테이블에 DummyTbody라 설정해줍니다.

 

 

 

 

 

 

 

 

Controller

 

 

@RequestMapping(value = "/adms/cmanage/contractManage/list_ajax.do", method = RequestMethod.POST)
@ResponseBody
public List<storeOrganismVO> delete_action(MultipartHttpServletRequest multiRequest,
    HttpServletResponse response
    ) throws Exception {
    
    List<storeOrganismVO> excelDateList = new ArrayList<storeOrganismVO>();
 
try{            
    
    ExcelRequestManager em = new ExcelRequestManager();
    final Map<String, MultipartFile> files = multiRequest.getFileMap();
    List<HashMap<String,String>> apply =null;
    
    apply = em.parseExcelSpringMultiPart(files,"strbio", 0, "", "create");
    
    for(int i = 0; i < apply.size(); i++){
        
        storeOrganismVO vo = new storeOrganismVO();    
        
        vo.setFss_fileType(apply.get(i).get("cell_0"));
        vo.setFss_file_name(apply.get(i).get("cell_1"));
        vo.setFss_sample(apply.get(i).get("cell_2"));
        vo.setFss_group(apply.get(i).get("cell_3"));
        
        excelDateList.add(vo);
        
    }
    
    
}catch(Exception e){
                
}
 
return excelDateList;
}

 

서버에서는 MultipartHttpServletRequest로 파일을 받은 다음

엑셀을 읽는 메소드를 사용해서 뷰 화면에 리스트값으로 내려줍니다.

 

 

(서버에서 엑셀데이터를 읽는것까지 정리하면 양이 너무 많아지므로 아래 글을 참고해주세요~)

 

https://chobopark.tistory.com/246  (소스와 연동)

[JAVA] 엑셀파일 업로드 및 DB insert 방법!! (영상 有)

 

 

 

 

또는,

https://chobopark.tistory.com/219  (소스와는 별개의 엑셀데이터추출입니다.)

[Java&Jsp] 엑셀 데이터 추출 후, 뷰페이지 확인 방법!!

 

 

 

 

 

반응형

 

 

 

 

JQUERY

 

 

function fileUpload(){
 
if( $("#atch_file_id").val() == ""){
    alert("첨부파일을 등록해주세요.");  
    $("#atch_file_id").focus();
return false;
}
 
var form = $('#excelForm')[0]; 
var formData = new FormData(form);
 
$.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
   url: "/adms/cmanage/contractManage/list_ajax.do",
    data: formData,
    processData: false,
    contentType: false,
    cache: false,
    success: function (data) {
 
    var addTag = "";
    var indexIj = 0;
    var i = 0; 
    var g = 0;
 
    //삭제
    $("#MainTbody").find("input[name='groupIdKey']").each(function(idx){
 
    idx++;
 
    var ckIdq = $("#f"+idx+"_0").parent().parent().parent();
    var ck1q = $("#fss_fileType_"+idx).val();
    var ck2q = $("#f"+idx+"_0").val();
    var ck3q = $("#f"+idx+"_1").val();
    var ck4q = $("#f"+idx+"_2").val();
    var ck5q = $("#fss_file_name_"+idx).val();
    var ck6q = $("#fss_sample_"+idx).val();
    var ck7q = $("#fss_group_"+idx).val();
 
    if(ck2q == "" && ck3q == "" && ck4q== "" && ck5q == "" && ck6q == "" && ck7q == ""){
            ckIdq.remove();     
    }
 
    i++;
    });    
 
 
    //삭제 후 행 값
    $("#MainTbody").find("input[name='groupIdKey']").each(function(){
    g++;
    });    
 
    //데이터 삽입
    for(var q=1; q < data.length; ++q){
        
        var ckId = $("#f"+i+"_0").parent().parent().parent().attr("id");
        var ck1 = $("#fss_fileType_"+i).val();
        var ck2 = $("#f"+i+"_0").val();
        var ck3 = $("#f"+i+"_1").val();
        var ck4 = $("#f"+i+"_2").val();
        var ck5 = $("#fss_file_name_"+i).val();
        var ck6 = $("#fss_sample_"+i).val();
        var ck7 = $("#fss_group_"+i).val();
            
        
        var fss_fileType = data[q].fss_fileType;
        var fss_file_name = data[q].fss_file_name;
        var fss_sample = data[q].fss_sample;
        var fss_group = data[q].fss_group;
        
        var $mainTbody = $("tbody#MainTbody");
        var $dummyTbody = $("tbody#DummyTbody");
        var $dTr = $dummyTbody.find("tr").clone();
        
        var idVal = $("#tdNo_"+q).attr("id");
        
        if(ck2 == undefined && ck3 == undefined && ck4 == undefined && ck5 == undefined && ck6 == undefined && ck7 == undefined){
            
                indexIj++;
                
                if(idVal != "" && idVal != undefined){
                    indexIj = Number(q) + Number(g);         
                }
                
        }else if(idVal != undefined){
                indexIj = Number(q) + Number(g);
        }else if(idVal == undefined){
            indexIj++;
        }else{
            indexIj++;
        }
        
            $dTr.find("input[name='groupIdKey']").val(indexIj); 
            $dTr.addClass("tableSize");
            $dTr.find("td.tdNo").html(indexIj);
            $dTr.find("div.fastq_").attr("class", "fastq_"+indexIj);
            $dTr.find("div.fasta_").attr("class", "fasta_"+indexIj);
            $dTr.find("td.tdNo").attr("id","tdNo_"+indexIj);
            selId= $dTr.find("select[name='fss_fileType']").attr("id");
            selId= selId+indexIj;
            $dTr.find("select[name='fss_fileType']").attr("id",selId);
            $dTr.find("select[name='fss_fileType']").attr("onchange","chageSelect("+indexIj+")");
            $dTr.find("#fss_fileType_"+indexIj).val(fss_fileType).attr("selected","selected");
            $dTr.find("input[name='f_0']").attr("id","f"+indexIj+"_0");
            $dTr.find("input[name='f_1']").attr("id","f"+indexIj+"_1");
            $dTr.find("input[name='f_2']").attr("id","f"+indexIj+"_2");
            $dTr.find("input[name='f_0']").attr("name","f"+indexIj+"_0");
            $dTr.find("input[name='f_1']").attr("name","f"+indexIj+"_1");
            $dTr.find("input[name='f_2']").attr("name","f"+indexIj+"_2");
            fgId= $dTr.find("input[name='fss_group']").attr("id");
            fgId=fgId+indexIj;
            $dTr.find("input[name='fss_group']").attr("id",fgId); 
            $dTr.find("#fss_group_"+indexIj).val(fss_group); 
            fsId= $dTr.find("input[name='fss_sample']").attr("id");
            fsId=fsId+indexIj;
            $dTr.find("input[name='fss_sample']").attr("id",fsId);
            $dTr.find("#fss_sample_"+indexIj).val(fss_sample);
            fsId= $dTr.find("input[name='fss_file_name']").attr("id");
            fsId=fsId+indexIj;
            $dTr.find("input[name='fss_file_name']").attr("id",fsId);
            $dTr.find("#fss_file_name_"+indexIj).val(fss_file_name);
            $mainTbody.append($dTr);
        
        }
 
    },
 
    error: function (e) {
     console.log(e);
    }
    });
 
 
}

 

 

가장 중요한 부분인 스크립트 부분입니다.

 

 

 

유효성 검사를 한 다음,

폼의 아이디값을 부른다음 formData에 담아서 이를 서버로 보내는 작업을 합니다.

var form = $('#excelForm')[0]; 
var formData = new FormData(form);

 

 

 

 

먼저 화면에 보이는 테이블에 대해 반복문을 돌면서

값이 비어있으면 삭제를 해줍니다.

 

 

 

 

그리고 서버에 가져온 data를 각각의 변수에 넣어준다음,

복사할 테이블 부분을 clone으로 복사해줍니다.

 var $dTr = $dummyTbody.find("tr").clone();

 

 

 

여러 조건에 대해서 인덱스 값을 설정해준다음, (indexIj)

$dT에 각각의 태그들을 찾아서 값을 넣어준다음

메인 tbody에 붙여줍니다. ($mainTbody.append($dTr);)

 

 

 

 

 

 

여기서 핵심적인 부분은,

form태그의 첨부파일을 ajax로 보낸 점과

그 데이터를 clone으로 하여 데이터 값을 넣는 점이 주된 포인트입니다!