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("&", "&amp;");
  str=str.replaceAll("<", "&lt;");
  str=str.replaceAll(">", "&gt;");
  str=str.replaceAll("'", "&apos;");
  str=str.replaceAll("\"", "&quot;");
 
  
  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进行。