5

と を使用jqGridして、データを表形式で表示するために使用していJSPますservlet

編集

などの操作を行った際に、サーバーからのエラーを表示したいinsert, update, delete(datatype: "xml")

JQグリッド

jQuery("#list10_d").jqGrid({
                height:250,
                width:600,
                url:'Assignment?action=Assign',
                datatype: "xml",
                colNames:['Sr. No.','PID',  'DATE',  'EMPID'],
                colModel:[{name:'srNo',index:'srNo', width:30,sortable:false},
                           {name:'PID',index:'PID',width:0, sortable:true,editable:false},
                           {name:'DATE',index:'DATE', width:75,sortable:true,editable:true,editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({dateFormat:"dd-M-yy",showButtonPanel: true,changeYear: true,changeMonth: true}).attr('readonly','readonly'); }, 200); }}},
                           {name:'EMPID',index:'EMPID', width:150,sortable:true,editable:true}
                           ],
                rowNum:10,
                rowList:[10,20,50,100],
                pager: '#pager10_d',
                sortname: 'PID',
                viewrecords: true,
                sortorder: "asc",

                    },
                multiselect: true,
                editurl: "Assignment?action=Edit",
                caption:"Assignment"
            } ).navGrid('#pager10_d',{edit:false,add:true,del:false,addtext:'Assign '},
                    {},
                    {modal:true,jqModal: false,closeOnEscape:true,savekey: [true,13],closeOnEscape:true, recreateForm: true,width:500,mtype:'POST', url: 'Assignment',editData:{action: 'Assign',PID: function () {return PID;}}, 
                afterSubmit: function (response) {
                        alert('After Submit \n' +'statusText: '+ response.statusText);
                        var myInfo = '<div class="ui-state-highlight ui-corner-all">'+
                                     '<span class="ui-icon ui-icon-info" ' +
                                         'style="float: left; margin-right: .3em;"></span>' +
                                     response.statusText + 'Inserted'+
                                     '</div>',
                             $infoTr = $("#TblGrid_" + $.jgrid.jqID(this.id) + ">tbody>tr.tinfo"),
                            $infoTd = $infoTr.children("td.topinfo"); 
                        $infoTd.html(myInfo);
                        $infoTr.show();

                        // display status message to 3 sec only
                        setTimeout(function () {
                            $infoTr.slideUp("slow");
                        }, 5000);

                        return [true, "", ""]; // response should be interpreted as successful
                    },
                    errorTextFormat: function (response) {
                    alert('Error Text Format: \n' +'statusText: '+ response.statusText);

                        return '<span class="ui-icon ui-icon-alert" ' +
                                     'style="float:left; margin-right:.3em;"></span>' +
                                    response.statusText;},
                    {closeOnEscape:true, recreateForm: true,mtype: 'POST',url: 'Assignment',delData: {action: 'Delete',PID: function () {return PID;}}},
                    {}) ;

サーブレット コード

if(request.getParameter("action").equalsIgnoreCase("Assign"))
        {
            PID = request.getParameter("PID");
            String DATE= request.getParameter("DATE");
            String EMPID= request.getParameter("EMPID");

            String query = "insert into ASSIGN(PID,DATE,EMPID) values('"+ PID +"','"+ DATE +"','"+ EMPID"')";
            boolean b = insert.InsertData(query);
            if(b)
            {
                System.out.println("New record added successfully! : "+query);
                response.setContentType("text/xml");
                response.setCharacterEncoding("UTF-8");

                //response.sendError(200, "success");
                response.setStatus(200, "Inserted successfully");

            }
            else
            {
                System.out.println("Failed to add Record! : "+query);
                response.setContentType("text/xml");
                response.setCharacterEncoding("UTF-8");

                //response.sendError(399, "not Inserted successfully");   
                response.setStatus(404, "Error while inserting");   
            }           
        }//INSERT

上記の例では

  • insertingjqgrid からのレコードの後、レコードのNo message is shown場合はグリッドでinserted successfully
  • error Status: 'Unauthorized'. Error code: 401サーブレットがデータベースへのレコードの挿入に失敗した場合に表示されます。

私の質問は次のとおりです。

  • insertingjqgrid からのレコードの後、レコードが挿入された場合、データが挿入されたという情報をユーザーに提供するメッセージをどのように表示する必要がありますか。
  • そして、どのようにユーザーにメッセージを表示する必要がありますかError while inserting(これにerror codeはどれを使用する必要がありますか?)

前もって感謝します.....

4

2 に答える 2

5

古い回答別の回答で、グリッドフォームの既存の非表示行(tr.tinfo)を使用して、エラーではない情報を表示することを提案しました。答えはよく知られていないので、ここで同じ情報を繰り返しますが、すべてをより詳細に説明しようとします.

まず、どの要素に標準の編集/追加フォームがあるかを理解することが重要です。IE や Chrome の開発者ツール、Firebug、またはその他の多くのツールを使用すると、jqGrid によって作成された追加/編集フォームの上部に 2 つの非表示の行が含まれていることが簡単にわかります。

ここに画像の説明を入力

最初の行は、エラー メッセージの場所としてデフォルトで使用されます。errorTextFormat情報を少しカスタマイズするために使用できます。

サーバーの応答にエラー HTTP ステータス コード (>=400) が含まれている場合、コールバックerrorTextFormatが呼び出され、次を使用できます。

errorTextFormat: function (response) {
    return response.responseText;
}

または何かのような

errorTextFormat: function (response) {
    return '<span class="ui-icon ui-icon-alert" ' +
                 'style="float:left; margin-right:.3em;"></span>' +
                response.responseText;
}

のようなエラーメッセージを表示するには

ここに画像の説明を入力

同様に、サーバーの応答に成功したHTTP ステータス コードafterSubmitが含まれている場合、編集/追加されたデータの送信後にコールバックを使用してステータス メッセージを表示できます。の実装は次のようになりますafterSubmit

afterSubmit: function (response) {
    var myInfo = '<div class="ui-state-highlight ui-corner-all">'+
                 '<span class="ui-icon ui-icon-info" ' +
                     'style="float: left; margin-right: .3em;"></span>' +
                 response.responseText +
                 '</div>',
        $infoTr = $("#TblGrid_" + $.jgrid.jqID(this.id) + ">tbody>tr.tinfo"),
        $infoTd = $infoTr.children("td.topinfo");
    $infoTd.html(myInfo);
    $infoTr.show();

    // display status message to 3 sec only
    setTimeout(function () {
        $infoTr.slideUp("slow");
    }, 3000);

    return [true, "", ""]; // response should be interpreted as successful
}

このコードは、ステータス メッセージを 3 秒間だけ表示し、jQuery.slideUpアニメーションを使用して非表示にします。次のようになります

ここに画像の説明を入力

それがあなたが必要とするものであることを願っています。

于 2013-02-13T22:26:19.260 に答える