0

私は Grails と jqGrid を使用しており、かなり奇妙な拡張機能を動作させようとしています: jqGrid コントローラーに渡され、データのフィルター処理に使用されるファイルをユーザーがアップロードできるようにしたいと考えています。たとえば、ファイルは名前のリストであり、グリッドはそれらの名前を含む行にフィルターされます。これを行う簡単な方法はありますか？

私が試みているのは、FormData オブジェクトで AJAX fileuploader を使用し、それを 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>

これは、ファイル データをコントローラーに到達させることができた唯一の方法ですが、グリッドからの他のすべての検索/並べ替え/ページング パラメーターを上書きするようです。"data" ajax パラメーターを key:object ペアと定義すると、グリッドは単純にリロードされず、エラーも発生しません! 誰かがこれについて何かアドバイスがあれば、本当に感謝します! 本当にありがとう！

4

1 に答える 1

0

おそらく最良のスタイルではありませんが、問題を解決するかなり奇妙な回避策を見つけました。

最大の問題は、ビューからコントローラーに FormData オブジェクト (ファイル) を渡すには、AJAX 呼び出しの "processingData" 属性を false にする必要があることです。jqGrid 自体でこれを機能させることができなかったので、FormData オブジェクトをコントローラーに送信し、それをグローバル変数に保存する別の AJAX 呼び出しを作成しました (悪いスタイルです!)。別のオプションは、ドメインに保存することですが、グローバル変数は私にとっては問題ありません。私のコントローラーアクションは、フィルタリングにグローバル変数を使用するだけです。最初にページにアクセスしたときに（別の ajax 呼び出しで）グローバル変数をクリアする必要がありました。

ビューのコード サンプルを次に示します。

<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>

コントローラーのアクションは次のとおりです。

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" をクエリの一部として使用できます。

于 2013-11-01T00:44:30.743 に答える