第2個jqGrid範例:增加額外選項設定

本篇列出幾個常用的jqGrid options的設定,比對畫面與表格即能快速的理解這些設定的功用。

options參數 說明
pager 設定jqGrid的頁面瀏覽面板的id,必須有<div id=”pager”>標籤,預設顯示在表格底部
caption Grid的標題,若不指定或設定成空字串,標題列就會消失
hidegrid 設定成false讓右上角的顯示/隱藏按鈕消失
rownumbers 設定成true在每列開頭顯示記錄編號
rowList 顯示每頁顯示幾筆記錄的陣列
viewrecords 是否顯示目前記錄編號與總筆數
altRows 設定成true以形成奇、偶數列不同樣式(俗稱斑馬線)。樣式以預設值altclass設定

jqGrid options 設定了這些選項果然顯示出額外訊息,但卻都是英文的,幸好jqGrid內建支援i18n功能,將顯示字串獨立成不同的js檔案:

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

只要把-en修改成別的語言(如zh_TW)並複製grid.locale-en.js為新的grid.locale-新語言.js,再編輯檔案內容就能顯示正確的語言文字。 我們可以在JSP開頭加上取得瀏覽器語言的變數,以動態切換成不同的jqGrid文字:

<%
  String _sLocale = request.getLocale().toString();
%>
//...
<script src="js/i18n/grid.locale-< %=_sLocale%>.js" type="text/javascript"></script>

除了使用語言js檔外,也可以透過變更jqGrid物件的預設值來達成相同功能。jqGrid建立好後,其主物件名稱是$.jqgrid,修改$.jqgrid.defaults就可以了,例如:

  $.jgrid.defaults = {
    recordtext: "記錄 {0} - {1} 共{2}筆",
    emptyrecords: "無資料",
    loadtext: "載入中...",
    pgtext: "第{0}頁/共{1}頁",
    altclass: "altClass"
  };

▼中文化後的畫面如下:

jqgrid i18n

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

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

##

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

6 則留言 »第2個jqGrid範例:增加額外選項設定

  • c.c Windows XP Google Chrome 15.0.874.106

    不好意思,能否麻煩您提供 範例2 的附檔 my_localex2.jsp ?現在沒辦法下載了,謝謝。

    • 簡睿 Windows other version Firefox 10.0a1

      Sorry, 檔名寫錯了,已修正。請用右鍵Save As另存新檔。

      不過,要不要試看看dataTables? 我覺得比jqGrid簡單,更容易上手。

  • c.c Windows XP Google Chrome 15.0.874.106

    感謝您的回覆。
    也謝謝您提供新資訊,謝謝。

  • c.c Windows XP Google Chrome 15.0.874.106

    謝謝您的建議,用datatables真的很快就可以建立表格。
    不過,它好像不能進行修改、刪除等動作?
    我看了您提供的範例二,我覺得自己的寫法應該跟您差不多,但不知要怎麼把jqGrid的參數送到PHP(目前是將HTML、PHP及JS都寫在同一個PHP檔中),請問能麻煩您提供一些建議嗎?謝謝您。

    • 簡睿 Windows other version Firefox 10.0a1

      修改、刪除等自己做dialog處理就好了,jqGrid的格式我記得比較固定,實際應用上或許會受限。
      因jqGrid已很久沒再使用,傳參數的作法不記得了,但應該找server data相關的文件看看。再不然,用jQuery的$.post()傳資料到後端吧。

  • c.c Windows XP Google Chrome 15.0.874.106

    感謝您的回覆,我會依您的建議試著實作,謝謝!

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

隨機文章

  1. 《十年後的台灣》讀後感 
  2. 新發表的Windows Toodledo client: Due Today (2)
  3. FireFox 2.0的問題… (4)
  4. 佈景主題Atahualpa 3.5.2增加WordPress 3.0選單功能 (1)
  5. [轉貼] 全台灣第一家部落格廣告聯播網,結合1600個部落格的網站… (6)
  6. 用jQuery改造WordPress網頁 (2)
  7. Open source的資料庫建模工具:Db Designer Fork 
  8. 神似 Google search的x-friend 
  9. [vista] 取代StrokeIt的滑鼠手勢工具:gMote 
  10. SQL Server 2008 R2 Express簡易安裝紀錄 

歷史熱門文章

  1. 如何手動輸入Plurk的表情圖示? (367,767 點擊/2008-09-29)
  2. 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (118,718 點擊/2011-06-01)
  3. Plurk CSS樣式自訂修改全攻略 (89,202 點擊/2009-07-04)
  4. 簡單放大Plurk輸入區的方法[修訂] (88,799 點擊/2008-09-29)
  5. 網路升級光世代50M/3M與設定ZyXEL P874 (71,280 點擊/2011-05-28)
  6. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (50,584 點擊/2008-04-10)
  7. iPad新手入門技巧 (48,890 點擊/2011-02-05)
  8. iPad鍵盤輸入全攻略 (42,272 點擊/2011-01-01)
  9. 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (40,754 點擊/2010-04-27)
  10. 調整Windows 7環境: 加回工作列的「顯示桌面」圖示 (40,549 點擊/2010-01-02)