2013-01-18 43 views
5

我使用jqGrid以表格格式顯示數據,使用JSPservletjqgrid如何顯示服務器端消息

編輯

我想進行類似insert, update, delete操作時,顯示來自服務器的錯誤。 (datatype: "xml")

的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;}}}, 
        {}) ; 

servlet代碼

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 

對於上面的例子

  • inserting從記錄的jqGrid,然後No message is shown在 電網如果記錄是inserted successfully
  • error Status: 'Unauthorized'. Error code: 401如果失敗的servlet在數據庫中插入記錄所示。

我的問題是:

  • 後從jqGrid的inserting記錄,如果記錄插入的話,我應該如何顯示消息,給出的信息數據插入用戶。
  • 以及如何我應該給郵件用戶是Error while inserting(其中error code我應該使用這個?)

在此先感謝.....

回答

5

我在the old answer提出並在another one使用的網格形式(tr.tinfo)的現有隱藏行,以顯示它不是錯誤信息。因爲答案不是很清楚,我在這裏重複相同的信息,但我會盡力解釋所有更詳細的信息。

首先,瞭解哪些元素具有標準的編輯/添加表單很重要。使用IE或Chrome,Firebug的或許多其他工具的開發工具可以很容易發現,由jqGrid的創建添加/編輯表單包含的形式的頂部兩個隱藏行:

enter image description here

第一行將在默認情況下用作錯誤消息的地方。可以使用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; 
} 

顯示錯誤消息像

enter image description here

以相同的方式,如果服務器響應包含成功的HTTP status code,則可以使用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秒的狀態消息只ABD然後使用jQuery.slideUp動畫來隱藏。它看起來像

enter image description here

我希望這是你所需要的。

+0

感謝回答(和+1),我今天會嘗試。 – Bhushan

+0

@Bhushan:不客氣! – Oleg

+0

我已經更新了我的問題,在實現您的代碼之後,現在消息顯示在窗體的頂部,如圖所示,但只顯示狀態代碼,如插入成功時只顯示「確定」,並且無法插入那麼只顯示'Not Found',但是我無法顯示servlet在form中發送'custom'消息..我在發送Servlet到網格的錯誤時做錯了嗎?任何幫助將不勝感激... – Bhushan

3

我已經做了財產以後在編輯電話相似到我的服務器,所以我認爲這將工作在一個非常類似的方式添加。

上編輯後的控制器/刪除/添加通話,你會確定是否存在被傳遞到用戶的消息,如果是通過JSON傳遞(XML你的情況)回饋到電網。

防爆

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 

在你的jqGrid你有你的編輯/刪除/添加功能:

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

所以在上面的例子中,如果手術失敗了,你可以顯示一個消息一個success = false,或者如果操作成功,但你想傳遞一些額外的信息給用戶,你可能也與sucess = true & & showMessage = true

這是編輯的JSON示例但其概念和邏輯應該是XML和一個附加同一/刪除操作。

相關問題