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

本篇列出幾個常用的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範例：Local array (1則留言, 2010/02/13)
• 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
• 第3個jqGrid範例: XML與XML STRING格式 (2則留言, 2010/02/14)
• jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
• [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
• jQuery選擇器測試與範例 (0則留言, 2007/09/29)
• 使用jQuery的效益 (0則留言, 2007/09/23)
• [jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
• FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
• jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)
• 用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
• 替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
• jQuery在Xuite的測試 (0則留言, 2007/10/01)
• 使用TiddlyWiki彙總部落格文章的方法與心得 (4則留言, 2007/12/01)
• jQuery TreeView插件IE異常解決方法 (0則留言, 2007/11/13)