第3個jqGrid範例: XML與XML STRING格式

2010/02/14 |

| 點擊數: 9 / 7161

如果將datatype設定為XML或XMLSTRING時，就能使用XML格式當做資料來源。XML資料儲放在程式外部時使用”XML”，要使用內嵌於程式裡時則使用”XMLSTRING”。

伴隨XML資料來源必須指定取得資料的網址，使用url定義主機端的資料提供程式，或者直接指定一個XML檔當做網址也可以。以下範例my_xmlex.jsp改寫自範例資料夾裡的xmlex.html；請注意我把第一個colNames欄位的標題設定成紅色字體：

< %@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
< %@ include file="/jqgrid/jq_inc.jspf" %>
<style type="text/css">
  .altClass {
    background: lightYellow;
    color: red;
  }
</style>
</head>
<table id="list1"></table>
<div id="pager1"></div>
<br />
<br />
</html>

<script type="text/javascript">
  jQuery(document).ready(function () {
    /*$.jgrid.defaults = { recordtext: "記錄 {0} - {1} 共{2}筆",
	    emptyrecords: "無資料",
      loadtext: "載入中...",
		  pgtext: "第{0}頁/共{1}頁",
      altclass: "altClass"
    };*/
    $.jgrid.defaults.altclass = "altClass";  // 奇偶列使用不同的樣式形成斑馬紋

    jQuery("#list1").jqGrid({
      url:'test1_xml.jsp',  // 主機端提供資料的網址
      datatype: "xml",
      colNames:['<font color="red">使用者代碼</font>','姓名', '密碼'],
      colModel:[
        { name:'userid', index:'userid', width:75 },
        { name:'username', index:'username', width:90, sortable:true },
        { name:'passwd', index:'passwd', width:100,align:'center' }
      ],
      rowNum:10,  // 由Server取回10筆
      rowList:[10,20,30],  // 每頁顯示筆數
      pager: jQuery('#pager1'),
      sortname: 'userid',
      sortorder: "desc",
      height: "auto",  // Grid高度
      autowidth: true, // 自動欄寬
      viewrecords: true,
      altRows: true,
      //footerrow: true,
      gridview: true,  // 設定成true以快速大量資料集之載入
      loadonce: true,  // 只由Server讀一次資料
      rownumbers: true,
      caption:"jqGrid測試3"
    });
    // 要顯示編輯與新增按鈕時使用下列指令
    //jQuery("#list1").jqGrid('navGrid', '#pager1', {edit:true,add:true,del:true});
  });

</script>

選項url:’test1_xml.jsp’指定主機端程式為test_xml.jsp，撰寫此jsp時有幾個重點：

jsp要傳回標準的XML格式，第一行必須就是<?xml version=’1.0′ encoding=’utf-8′?>，因此jsp開頭不要加上註解列或指引(directives)列
jsp要儲存並設定成UTF-8格式

回傳內容要讓jqGrid辨識出是XML格式，因此要加上下列指令：

  response.setCharacterEncoding("UTF-8");
  response.setHeader("Content-type","text/xml");

test1_xml.jsp範例如下：

< %
  response.setCharacterEncoding("UTF-8");
  response.setHeader("Content-type", "text/xml");

  String _sPage = request.getParameter("page"); // get the requested page
  String _sLimit = request.getParameter("rows"); // get how many rows we want to have into the grid
  String _sIndex = request.getParameter("sidx"); // get index row - i.e. user click to sort
  String _sOrder = request.getParameter("sord"); // get the direction
  if (_sPage == null) _sPage = "1";
  if (_sIndex == null) _sIndex = "1";
  if (_sLimit == null) _sLimit = "10";
  int _iLimit = Integer.parseInt(_sLimit);
  if (_iLimit == 0) _iLimit = 10;
  int _iPage = Integer.parseInt(_sPage);

  Class.forName("net.sourceforge.jtds.jdbc.Driver"); // 使用jTDS連接MS SQL Server
  java.sql.Connection _oConn = java.sql.DriverManager.getConnection(
      "jdbc:jtds:sqlserver://localhost/資料庫", "使用者", "密碼");

  double _dTotalPages = 0;
  try {
    String _sSQL = "select top 20 USERID,USERNAME,PASSWD from Users order by USERID";
    java.sql.PreparedStatement _oStmt = _oConn.prepareStatement(_sSQL);
    java.sql.ResultSet rs = _oStmt.executeQuery();
    int _iCount = 0;
    StringBuffer _sbXml = new StringBuffer();  // 把記錄存起來，最後一齊輸出
    while (rs.next()) {
      _iCount++;
      _sbXml.append("<row id=\"" + _iCount + "\">");
      _sbXml.append("<cell>< ![CDATA[" + rs.getString(1) + "]]></cell>");
      _sbXml.append("<cell>< ![CDATA[" + rs.getString(2) + "]]></cell>");
      _sbXml.append("<cell>< ![CDATA[" + rs.getString(3) + "]]></cell>");
      _sbXml.append("\n");
    }
    if( _iCount >0 ) {
      _dTotalPages = Math.ceil(_iCount/_iLimit);
    } else {
      _dTotalPages = 0;
    }
    if (_iPage > _dTotalPages) _iPage = (int) _dTotalPages;
    int _iStart = _iLimit * _iPage - _iLimit; // do not put $limit*($page - 1)

    out.println("< ?xml version=\"1.0\" encoding=\"utf-8\"?>");
    out.println("<rows>");
    out.println("<page>" + _iPage + "</page>");
    out.println("<total>" + ((int) _dTotalPages) + "</total>");
    out.println("<records>" + _iCount + "</records>");
    out.print(_sbXml.toString());
    out.println("</rows>\n");
  } catch (Exception e) {
    out.println("Exception: " + e.getMessage());
  } finally {
    if (_oConn != null) _oConn.close();
  }
%>

執行後畫面如下： jqGrid XML datatype

XML檔案的資料格式

除非有使用選項xmlReader特別指定XML的資料格式，否則標準的XML資料必須為下列格式讓jqGrid讀取：

< ?xml version ="1.0" encoding="utf-8"?>
<rows>
  <page>開始頁數</page>
  <total>總頁數</total>
  <records>總筆數</records>
    <row id = 'unique_rowid'>
      <cell> cellcontent </cell>
      <cell> < ![CDATA[<font color='red'>cell content]]> </cell>
        …
    </row>
    <row id = 'unique_rowid'>
      <cell> cellcontent </cell>
      <cell> < ![CDATA[<font color='red'>cell content]]> </cell>
        …
    </row>
      …
</rows>

url除了指定JSP檔案外，也可以直接指定XML檔，例如：url: "test1.xml"。範例test1_xml.jsp產生的資料內容如下。：

< ?xml version="1.0" encoding="utf-8"?>
<rows>
<page>1</page>
<total>2</total>
<records>20</records>
<row id="1"><cell>< ![CDATA[AARON.LIN]]></cell><cell>< ![CDATA[林大龍]]></cell><cell>< ![CDATA[123]]></cell></row>
<row id="2"><cell>< ![CDATA[ABBY.LIANG]]></cell><cell>< ![CDATA[梁小惠]]></cell><cell>< ![CDATA[456]]></cell></row>
<row id="3"><cell>< ![CDATA[ABEL.LEE]]></cell><cell>< ![CDATA[李中彬]]></cell><cell>< ![CDATA[123]]></cell></row>
<row id="4"><cell>< ![CDATA[AGE.WANG]]></cell><cell>< ![CDATA[王大軍]]></cell><cell>< ![CDATA[456]]></cell></row>
<row id="5"><cell>< ![CDATA[AIR.WEI]]></cell><cell>< ![CDATA[魏中中]]></cell><cell>< ![CDATA[789]]></cell></row>
<row id="6"><cell>< ![CDATA[ALB.YEH]]></cell><cell>< ![CDATA[葉小光]]></cell><cell>< ![CDATA[123]]></cell></row>
<row id="7"><cell>< ![CDATA[ALEX.HUANG]]></cell><cell>< ![CDATA[黃大智]]></cell><cell>< ![CDATA[456]]></cell></row>
<row id="8"><cell>< ![CDATA[ALICE.HUANG]]></cell><cell>< ![CDATA[黃中英]]></cell><cell>< ![CDATA[789]]></cell></row>
<row id="9"><cell>< ![CDATA[AMY.CHUANG]]></cell><cell>< ![CDATA[鍾小梅]]></cell><cell>< ![CDATA[abc]]></cell></row>

<row id="10"><cell>< ![CDATA[AMY.WU]]></cell><cell>< ![CDATA[巫大瑢]]></cell><cell>< ![CDATA[def]]></cell></row>
<row id="11"><cell>< ![CDATA[ANBEY.XIE]]></cell><cell>< ![CDATA[謝中彬]]></cell><cell>< ![CDATA[ghi]]></cell></row>
<row id="12"><cell>< ![CDATA[ANDREW.LIN]]></cell><cell>< ![CDATA[林小宇]]></cell><cell>< ![CDATA[123]]></cell></row>
</rows>

內嵌式的xmlstring也是非常簡單，把url換成datastr就可以了：

< %@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
< %@ include file="/jqgrid/jq_inc.jspf" %>
<style type="text/css">
  .altClass {
    background: lightYellow;
    color: red;
  }
</style>
</head>
<table id="list1"></table>
<div id="pager1"></div>
<br />
<br />
</html>

<script type="text/javascript">
  // 把XML內嵌到JavaScript的變數裡
  var _sXmlString = "< ?xml version='1.0' encoding='utf-8'?>"+
  "<rows>"+
  "<page>1</page>"+
  "<total>2</total>"+
  "<records>20</records>"+
  "<row id='1'><cell>< ![CDATA[AARON.LIN]]></cell><cell>< ![CDATA[林大龍]]></cell><cell>< ![CDATA[123]]></cell></row>"+
  "<row id='2'><cell>< ![CDATA[ABBY.LIANG]]></cell><cell>< ![CDATA[梁小惠]]></cell><cell>< ![CDATA[456]]></cell></row>"+
  "<row id='3'><cell>< ![CDATA[ABEL.LEE]]></cell><cell>< ![CDATA[李中彬]]></cell><cell>< ![CDATA[123]]></cell></row>"+
  "<row id='4'><cell>< ![CDATA[AGE.WANG]]></cell><cell>< ![CDATA[王大軍]]></cell><cell>< ![CDATA[456]]></cell></row>"+
  "<row id='5'><cell>< ![CDATA[AIR.WEI]]></cell><cell>< ![CDATA[魏中中]]></cell><cell>< ![CDATA[789]]></cell></row>"+
  "<row id='6'><cell>< ![CDATA[ALB.YEH]]></cell><cell>< ![CDATA[葉小光]]></cell><cell>< ![CDATA[123]]></cell></row>"+
  "<row id='7'><cell>< ![CDATA[ALEX.HUANG]]></cell><cell>< ![CDATA[黃大智]]></cell><cell>< ![CDATA[456]]></cell></row>"+
  "<row id='8'><cell>< ![CDATA[ALICE.HUANG]]></cell><cell>< ![CDATA[黃中英]]></cell><cell>< ![CDATA[789]]></cell></row>"+
  "<row id='9'><cell>< ![CDATA[AMY.CHUANG]]></cell><cell>< ![CDATA[鍾小梅]]></cell><cell>< ![CDATA[abc]]></cell></row>"+
  "<row id='10'><cell>< ![CDATA[AMY.WU]]></cell><cell>< ![CDATA[巫大瑢]]></cell><cell>< ![CDATA[def]]></cell></row>"+
  "<row id='11'><cell>< ![CDATA[ANBEY.XIE]]></cell><cell>< ![CDATA[謝中彬]]></cell><cell>< ![CDATA[ghi]]></cell></row>"+
  "<row id='12'><cell>< ![CDATA[ANDREW.LIN]]></cell><cell>< ![CDATA[林小宇]]></cell><cell>< ![CDATA[123]]></cell></row>"+
  "</rows>";

  jQuery(document).ready(function () {
    /*$.jgrid.defaults = { recordtext: "記錄 {0} - {1} 共{2}筆",
	    emptyrecords: "無資料",
      loadtext: "載入中...",
		  pgtext: "第{0}頁/共{1}頁",
      altclass: "altClass"
    };*/
    $.jgrid.defaults.altclass = "altClass";  // 奇偶列使用不同的樣式形成斑馬紋

    jQuery("#list1").jqGrid({
      datatype: "xmlstring",
      datastr: _sXmlString,
      colNames:['<font color="red">使用者代碼</font>','姓名', '密碼'],
      colModel:[
        { name:'userid', index:'userid', width:75 },
        { name:'username', index:'username', width:90, sortable:true },
        { name:'passwd', index:'passwd', width:100,align:'center' }
      ],
      rowNum:10,  // 由Server取回10筆
      rowList:[10,20,30],  // 每頁顯示筆數
      pager: jQuery('#pager1'),
      sortname: 'userid',
      sortorder: "desc",
      height: "auto",  // Grid高度
      autowidth: true, // 自動欄寬
      viewrecords: true,
      altRows: true,
      //footerrow: true,
      gridview: true,  // 設定成true以快速大量資料集之載入
      loadonce: true,  // 只由Server讀一次資料
      rownumbers: true,
      caption:"jqGrid測試3"
    });
    // 要顯示編輯與新增按鈕時使用下列指令
    //jQuery("#list1").jqGrid('navGrid', '#pager1', {edit:true,add:true,del:true});
  });

</script>

範例檔案下載(請用右鍵另存目標)

範例1	Local array: my_localex.html
範例2	Local array 2: my_localex2.jsp
範例3	XML類型: my_xmlex.jsp XML字串類型: my_xmlstringex.jsp JSP含入檔: jq_inc.jspf 產生資料的程式範例：test1_xml.jsp
範例4	資料列處理程式: my_manipex.jsp