Jquery Grid插件jqGrid的使用demo

第一步：引入文件，具体下载的地址网上很多，这里不在罗嗦。

<link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="themes/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
?
<script src="js/jquery.js" type="text/javascript"> </script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"> </script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"> </script>
?第二步：编写前台

<table id="alertsTable"></table>

?

<script type="text/javascript">
$(function(){
?jQuery("#alertsTable").jqGrid({
??? ?url: 'GetAlertsServlet?time=<%=time %>',?????<!--time为request接收传递的参数 -->
??datatype: "xml",
??? ?colNames:["告警序列号","子系统", "告警级别", "最近发生时间"," 告警分组","告警关键字","告警摘要","中文参考","告警节点","IP地址","重复次数","短信通知人","应用名称"],
??? ?colModel:[
??? ??{name:"Serial",index:"Serial", width:100,align:"center",xmlmap:"ItemAttributes>Serial"},
??? ??{name:"Agent",index:"Agent", width:80,align:"center",xmlmap:"ItemAttributes>Agent"},
??? ??{name:"Severity",index:"Severity", width:85, align:"right",xmlmap:"ItemAttributes>Severity"},
??? ??{name:"LastOccurrence",index:"LastOccurrence",align:"left", width:130,xmlmap:"ItemAttributes>LastOccurrence",sorttype:"date"},
??? ??{name:"AlertGroup",index:"AlertGroup", width:150, xmlmap:"ItemAttributes>AlertGroup"},
??? ??{name:"AlertKey",index:"AlertKey", width:150,xmlmap:"ItemAttributes>AlertKey"},
??? ??{name:"Summary",index:"Summary", width:200, align:"right",xmlmap:"ItemAttributes>Summary"},
??? ??{name:"CNSummary",index:"CNSummary", width:200,xmlmap:"ItemAttributes>CNSummary"},
??? ??{name:"Node",index:"Node", width:100, xmlmap:"ItemAttributes>Node"},
??? ??{name:"IPAddress",index:"IPAddress", width:100,xmlmap:"ItemAttributes>IPAddress"},
??? ??{name:"Tally",index:"Tally", width:85, align:"right",xmlmap:"ItemAttributes>Tally"},
??? ??{name:"SMSContract",index:"SMSContract", width:130,xmlmap:"ItemAttributes>SMSContract"},
??? ??{name:"AppName",index:"AppName", width:120, xmlmap:"ItemAttributes>AppName"},
??? ?],
??height:600,
??? ?rowNum:1000,
??? ?rowList:[20,50,100],
???? viewrecords: true,
??loadonce: true,
??xmlReader: {
????root : "Items",
????row: "Item",
????repeatitems: false,
????id: "ASIN"
??},
??caption: "关联告警"
?});
});

</script>
?

第三步：编写后台代码，我这里后台采用XML的形式

request.setCharacterEncoding("utf-8");
??response.setHeader("Pragma", "No-cache");
??response.setHeader("Cache-Control", "no-cache");
??response.setDateHeader("Expires", 0);
??response.setContentType("text/xml; charset=utf-8");

??PrintWriter out = response.getWriter();
??StringBuffer s = new StringBuffer();

??s.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
??s.append("? <Books>");
??s.append("??? <Items>");
??s.append("????? <Request>");
??s.append("??????? <IsValid>True</IsValid>");
??s.append("??????? <ItemSearchRequest>");
??s.append("????????? <SearchIndex>Books</SearchIndex>");
??s.append("??????? </ItemSearchRequest>");
??s.append("????? </Request>");
??
??ConnectionDao dao = new ConnectionDao();
??
??List alertList = null;
??if(time==null){
???alertList = new ArrayList();
??}else{
???alertList = dao.getAlertsByTime(Long.parseLong(time));
??}
??
??for(int i=0;i<alertList.size();i++){
???Alert alert = (Alert)alertList.get(i);
???s.append("????? <Item>");
???s.append("??????? <DetailPageURL></DetailPageURL>");
???s.append("??????? <ItemAttributes>");
???s.append("????????? <Serial>"+alert.getSerial()+"</Serial>");
???s.append("????????? <Agent>"+Deal.toMyString(alert.getAgent())+"</Agent>");
???s.append("????????? <Severity >"+alert.getSeverity()+"</Severity >");
???s.append("????????? <LastOccurrence>"+new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new java.util.Date(alert.getLastOccurrence()*1000))+"</LastOccurrence>");
???s.append("????????? <AlertGroup>"+Deal.toMyString(alert.getAlertGroup())+"</AlertGroup>");
???s.append("????????? <AlertKey>"+Deal.toMyString(alert.getAlertKey())+"</AlertKey>");
???s.append("????????? <Summary>"+Deal.toMyString(alert.getSummary())+"</Summary>");
???s.append("????????? <CNSummary>"+Deal.toMyString(alert.getCnSummary())+"</CNSummary>");
???s.append("????????? <Node>"+Deal.toMyString(alert.getNode())+"</Node>");
???s.append("????????? <IPAddress>"+Deal.toMyString(alert.getIpAddress())+"</IPAddress>");
???s.append("????????? <Tally>"+alert.getTally()+"</Tally>");
???s.append("????????? <SMSContract>"+Deal.toMyString(alert.getSmsContact())+"</SMSContract>");
???s.append("????????? <AppName>"+Deal.toMyString(alert.getAppName())+"</AppName>");
???s.append("??????? </ItemAttributes>");
???s.append("????? </Item>");
??}
??s.append("??? </Items>");
??s.append("? </Books>");

??out.println(s.toString());
??out.flush();

在生成XML文件的时候，我这里出现一些问题，就是不同浏览器出现的界面效果不同，最后检查原因为生成XML时后缀多出些东西。处理如下：

Deal.java:

public class Deal {

?public static String toMyString(String str) {
??if(str==null){
???return str;
??}
??str=str.replaceAll("&", "&");
??str=str.replaceAll("<", "<");
??str=str.replaceAll(">", ">");
??str=str.replaceAll("'", "'");
??str=str.replaceAll("\"", """);
?
??
??byte[] mybyte = str.getBytes();
??for(int i=0; i<mybyte.length; i++) {
???if(mybyte[i] == 0) {
????mybyte[i] = 0x20;
???}
??}
??return (new String(mybyte));
?}
}

?

OK,整个简单的demo就这样完成，具体的一些其它高级功能:编辑，删除，添加，查询，分页都可以看到api进行。

?