2013-01-18 27 views
5

jqGridを使用して、JSPservletを使用してデータを表形式で表示しています。jqgridサーバーサイドのメッセージを表示する方法

EDIT

私はinsert, update, deleteのような操作が実行されるときに、サーバーからのエラーを示したいと思います。次いで(datatype: "xml") jqgridからinsertingレコード後

JQGrid

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 

  • No message is shown in グリッドの場合レコードがinserted successfully
  • error Status: 'Unauthorized'. Error code: 401は、データベースにレコードを挿入できない場合に表示されます。

、私の質問はその:

  • jqgridからinsertingレコードの後、レコードは私がメッセージは、データが挿入されている利用者に情報を与えて表示する必要がありますどのようにして挿入されている場合。
  • とどのように私は、ユーザーにメッセージを与えるべきである(私はこれのために使うべきerror code?)Error while inserting事前に

おかげで.....

答えて

5

私はthe old answeranother oneに、エラーではない情報を表示するためにグリッドフォームの既存の隠し行(tr.tinfo)を使用することを提案しました。答えはよく分かっていないので、私はここで同じ情報を繰り返しますが、もっと詳しく説明しようとします。

最初に、どの要素に標準の編集/追加フォームがあるかを理解することが重要です。

enter image description here

最初に:IEやChrome、Firebugのか、他の多くのツールの開発者ツールを使用して1は、簡単なjqGridによって作成された追加/編集フォームがフォームの上に2つの隠し行が含まれていることを見つけることができます行はエラーメッセージの場所としてデフォルトごとに使用されます。情報を少しカスタマイズするためにerrorTextFormatを使うことができます。

サーバーの応答がエラーHTTPステータスコード(> = 400)が含まれている場合、コールバックerrorTextFormatが呼び出され、エラーメッセージを表示するように

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

よう

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

か何かを使用することができますlike

enter image description here

同様に、サーバーの応答に成功した場合に編集/追加されたデータを送信した後に、afterSubmitコールバックを使用してステータスメッセージを表示することができます。HTTP status codeafterSubmitの実装は、3秒のステータスメッセージを表示するコードのみABDが、それを隠すためjQuery.slideUpアニメーションを使用して、以下の

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 
} 

についてであってもよいです。それは、私はそれはあなたが必要なものを願っています

enter image description here

のようになります。

+0

回答ありがとうございました(そして+1)、私は今日それを試してみます。 – Bhushan

+0

@Bhushan:ようこそ! – Oleg

+0

あなたのコードを実装した後で私の質問が更新されました。イメージに表示されているようにフォームの上にメッセージが表示されますが、正常に挿入された場合や正常に挿入されなかった場合や'Not Found'だけが表示されますが、私はサーブレットから送られた' custom'メッセージをフォームに表示できません。サーブレットからグリッドにエラーを送信している間に間違っていますか?どんな助けも高く評価されます... – Bhushan

3

私が行っ気にいら編集コールに似ています私のサーバーには、これは非常によく似たような方法で動作すると思います。

編集/削除/追加呼び出しの後、ユーザーに渡すメッセージがあるかどうかを判断し、そうであればJSON(あなたの場合はXML)経由でグリッドに戻します。

function EditCollectionItem (rowid, grid){ 
     $(grid).jqGrid('editGridRow', rowid, 
     { 
      viewPagerButtons: false, 
      editData: { }, 
      afterComplete: function (response) { 
       var DialogVars = $.parseJSON(response.responseText); //parse the string that was returned in responseText into an object 
       //if there was a failure with the update, or there was information to pass to the user 
       if (!DialogVars.success || DialogVars.showMessage) { 
        alert(DialogVars.message); 
       } 
      } //afterComplete 
     }); //$(grid).jqGrid('editGridRow 
    }//function EditCollectionItem (rowid, grid){ 

したがって、上記の例では操作があなたとするメッセージを表示することができ失敗した場合:あなたが機能を追加/あなたの編集/削除する必要がありますあなたのjqGridで

if (infoDialogTrigger) { 
     return Json(new { success = true, showMessage = true, message = "Updating your Inventory and we are displaying this info box" }); 
    }//if 
    else { 
     return Json(new { success = true, showMessage = false, message = "" }); 
    }//else 

success = falseまたは操作が完了したが、ユーザーに余分な情報を渡す場合は、sucess = true & & showMessage = trueとすることもできます。

これはJSONの編集例ですが、概念とロジックはXMLと追加/削除操作で同じにする必要があります。