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

由簡睿 · 發表於: 2010/02/14 · 更新於: 2011/06/17 | 瀏覽數: 2 / 24430

如果將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

您可能也會有興趣的類似文章

第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
第一個jqGrid範例：Local array (1則留言, 2010/02/13)
第2個jqGrid範例：增加額外選項設定 (6則留言, 2010/02/13)
用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
jQuery選擇器測試與範例 (0則留言, 2007/09/29)
[jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)
FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
[jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
jQuery在Xuite的測試 (0則留言, 2007/10/01)
jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
使用jQuery的效益 (0則留言, 2007/09/23)
使用TiddlyWiki彙總部落格文章的方法與心得 (4則留言, 2007/12/01)
替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
方便查閱的jQuery 1.2 Cheat Sheet (1則留言, 2007/09/25)

簡睿

服務於軟體業的資訊老兵。興趣廣泛，學習力佳，樂於分享所知所學。

您可能也會喜歡…

peter表示:

2012/06/1802:26:56

這是一個好的教學，請問可以列一個用json檔案的資料格式的列子嗎(最好用到database)?
請問可以列一個Tree grid 的型式的列子嗎?

回覆
- 簡睿表示:
  
  2012/06/1915:20:08
  
  這…後來沒用jqGrid了，最後使用的是DataTables.net的DataTables
  
  回覆

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

XML檔案的資料格式

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

您可能也會有興趣的類似文章

您可能也會喜歡…

2 個回應

發佈留言取消回覆

本日最熱門

最新留言

歷史排行榜

頁面

標籤雲

頁面鏈接

2024 年 4 月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

XML檔案的資料格式

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

您可能也會有興趣的類似文章

您可能也會喜歡…

使用jQuery的效益

jQuery DataTables範例1：啟始設定

在Xuite裡使用jQuery的重點

2 個回應

發佈留言 取消回覆

本日最熱門

最新留言

歷史排行榜

頁面

發佈留言取消回覆