jqgrid如何显示服务器端消息

本文介绍了jqgrid如何显示服务器端消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用 jqGrid 以表格格式显示数据，使用 JSP 和 servlet 。

编辑

我想要展示执行插入，更新，删除等操作时服务器出错。 （数据类型：xml）

JQGrid

jQuery（＃list10_d）。jqGrid（{身高：250，宽度：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）;}}} ， {名称：'EMPID'，索引：'EMPID'，宽度：150，可排序：true，可编辑：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：'分配'，PID：function（）{return PID;}}， afterSubmit：function（response）{ alert（'After Submit \\\'+'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。儿童（ td.topinfo）; $ infoTd.html（myInfo）; $ infoTr.show（）; //仅显示状态消息3秒 setTimeout（function（）{ $ infoTr.slideUp（slow）; }，5000）; return [true，，]; //响应应解释为成功}， errorTextFormat：function（response）{ alert（'错误文本格式：\ n'+'statusText：'+ response.statusText） ; 返回'< 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）; 字符串EMPID = request.getParameter（EMPID）; 字符串查询=插入ASSIGN（PID，DATE，EMPID）值（'+ PID +'，'+ DATE +'，'+ EMPID'）; boolean b = insert.InsertData（query）; 如果（b） { System.out.println（新记录成功添加！：+查询）; response.setContentType（text / xml）; response.setCharacterEncoding（UTF-8）; //response.sendError(200，成功）; response.setStatus（200，成功插入）; } else { System.out.println（无法添加记录！：+查询）; response.setContentType（text / xml）; response.setCharacterEncoding（UTF-8）; //response.sendError(399，未成功插入）; response.setStatus（404，插入时出错）; } } // INSERT

以上示例

• 在从jqgrid插入记录后，没有显示消息在网格中如果记录已成功插入
• 错误状态：'未经授权。如果servlet无法在数据库中插入记录，则显示错误代码：401 。

我的问题是：

• 从jqgrid插入插入记录后，如果插入记录那么我该怎么办？显示消息，向用户提供插入数据的信息。
• 如何在插入时向用户发出错误消息（错误代码我应该用它吗？）

提前致谢... ..

解决方案

我建议在。 afterSubmit 的实现可以是以下

afterSubmit：function（响应）{ 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（）; //仅显示状态消息3秒 setTimeout（function（）{ $ infoTr.slideUp（slow）; }，3000）; return [true，，]; //响应应解释为成功}

代码将显示状态消息3秒只有abd然后使用 jQuery.slideUp 动画来隐藏它。它看起来像

我希望这就是你所需要的。

I am using jqGrid to show data in tabular format, using JSP and servlet.

EDIT

I want to show errors from server, when operations like insert, update, delete are performed. (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 Code

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

for above example

• after inserting record from jqgrid, then No message is shown in grid if record is inserted successfully
• error Status: 'Unauthorized'. Error code: 401 is shown if servlet fails to insert record in database.

My Question is that:

• after inserting record from jqgrid, if the record is inserted then how should i show message giving information to user that data is inserted.
• and how should I give message to user that Error while inserting (which error code should i use for this?)

Thanks in advance.....

解决方案

I suggested in the old answer and in another one to use existing hidden row of grid form (tr.tinfo) to display information which is not error. Because the answers are not well known I repeat the same information here, but I'll try to explain all more detailed.

First of all it's important to understand which elements has the standard Edit/Add form. Using Developer Tools of IE or Chrome, Firebug or many other tool one can easy find out that the Add/Edit form created by jqGrid contains two hidden rows on top of the form:

The first row will be used per default as the place for error message. One can use errorTextFormat to customize the information a little.

If the server response contains error HTTP status code (>=400) then the callback errorTextFormat will be called and you can use

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

or something like

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

to display error message like

In the same way one can use afterSubmit callback to display status message after submitting of edited/added data if the server response contains successful HTTP status code. The implementation of afterSubmit could be about the following

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 }

The code will display the status message for 3 sec only abd then uses jQuery.slideUp animation to hide it. It will look like

I hope it's what you need.