2013-10-30 3 views
0

Grails와 jqGrid를 사용하고 있는데 다소 이상한 확장 기능을 사용하려고합니다 : 사용자가 jqGrid 컨트롤러로 전달 될 파일을 업로드하고 데이터. 예를 들어, 파일은 이름 목록이며 그리드는 해당 이름을 포함하는 행으로 필터링됩니다. 이 작업을 수행하는 간단한 방법이 있습니까?파일을 jqGrid 컨트롤러에 전달

내가 해왔 던 것은 FormData 객체에 AJAX 파일 업로드 프로그램을 사용하고 jqGrid 매개 변수에 첨부하려고하는 것입니다. 내가 찍었을 가장 가까운 내가 몇 가지 이상한 행동을 얻고 있지만, 다음을 사용하는 것입니다

<g:form enctype="multipart/form-data" class="upload" name="fileinfo" id="fileinfo"> 
    <input name="uploadField" id="uploadField" type="file" value=""> 
    <input id="btnFilterFile" type="button" onclick="addFileFilter()" value="Apply Filter"/> 
</g:form> 

<table id="theGrid"></table> 

<script> 
function addFileFilter() { 
    var oData = new FormData(document.forms.namedItem("fileinfo")); 
    $("#theGrid").setGridParam({ajaxGridOptions: 
     {processData:false, type:'POST', data:oData}}); 

    $("#theGrid").trigger("reloadGrid"); 
} 
</script> 

이 내가 컨트롤러에 도달하기 위해 파일 데이터를 얻을 수 있었던 유일한 방법이지만 덮어 쓸 것 내 모든 다른 검색/정렬/페이징 매개 변수를 그리드에서. "데이터"아약스 매개 변수를 키 : 개체 쌍으로 정의하면 그리드가 단순히 다시로드되지 않고 오류가 발생하지 않습니다. 누구든지 이것에 대한 조언이 있다면, 나는 정말로 감사 할 것입니다! 정말 고마워!

가장 큰 문제는 컨트롤러에보기에서 FormData 객체 (파일)을 통과하는 것이 요구되었다 :

답변

0

은 비록 아마 최고의 스타일 아니며, 오히려 이상한 해결 방법이 문제를 해결하는이에 대한 발견 결국 AJAX 호출의 "processingData"속성이 false라는 것을 의미합니다. jqGrid 내에서이 작업을 수행 할 수 없으므로 FormData 객체를 컨트롤러로 보내고 전역 변수 (나쁜 스타일!)에 저장하는 별도의 AJAX 호출을 만들었습니다. 또 다른 옵션은 도메인에 저장하는 것이지만, 전역 변수는 괜찮습니다. 내 컨트롤러 동작은 전역 변수를 필터링에 사용합니다. 나는 처음에 페이지를 방문 할 때 (다른 아약스 호출로) 전역 변수를 지우는 것을 확인해야했다.

def static List<String> filterList = new ArrayList() 

def saveFileFilter = { 
    InputStream is = params.uploadField?.getInputStream() 
    def fileString = is.readLines() 
    is.close() 

    filterList = fileString 
    def response = [state: "OK", id: 1] 
    render response as JSON 
} 

def clearFileFilter = { 
    filterList = [] 
    def response = [state: "OK", id: 1] 
    render response as JSON 
} 

그런 다음있는 jqGrid에 대한 컨트롤러 액션에, 난 그냥 사용할 수 있습니다 "filterList"여기 컨트롤러 액션된다

<style> 
function clearFileField() { 
    $("#uploadField").val(""); 
    var url="${createLink(controller:"${pageType}",action:'clearFileFilter')}"; 
    jQuery.ajax({ 
     async: false, 
     url: url, 
     type:'POST', 
     success: function(data) { 
      $("${gridId}").trigger("reloadGrid"); 
     } 
    }); 
} 

function addFileFilter() { 
    var oData = new FormData(document.forms.namedItem("fileinfo")); 
    var url="${createLink(controller:"${pageType}",action:'saveFileFilter')}"; 
    jQuery.ajax({ 
     async: false, 
     url: url, 
     type:'POST', 
     data: oData, 
     processData:false, 
     contentType: false 
    }); 
    $("${gridId}").trigger("reloadGrid"); 
} 

$("#btnFilterByHostFile").click(function() { 
    addFileFilter(); 
}); 

$(document).ready(function() { 
    clearFileField(); 
} 
</script> 

<g:form enctype="multipart/form-data" class="upload" name="fileinfo" id="fileinfo"> 
    <input name="uploadField" id="uploadField" type="file" value=""> 
</g:form> 

그리고 다음은

뷰에서 코드 샘플입니다 쿼리의 일부로

관련 문제