1 引用本地化语言包
在 js/i18n 文件夹中,提供了大量预定义的语言包。它包括为所有字符串定义的,包括消息,标题,分页信息,搜索/添加/删除 的对话框 文本等。
在jQuery库文件后,在jqGrid 脚本文件前 引用语言包。
<head id="Head1" runat="server"> <!-- The jQuery UI theme that will be used by the grid -->> <link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.7.1.custom.css"/> <!-- The jQuery UI theme extension jqGrid needs -->> <link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css"/> <!-- jQuery runtime minified -->> <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script> <!-- The localization file we need, English in this case -->> <script src="/js/i18n/grid.locale-en.js" type="text/javascript"></script> <!-- The jqGrid client-side javascript -->> <script src="/js/jquery.jqGrid.min.js" type="text/javascript"></script> </head>
2 修改创建语言包
$.jgrid = { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext : "Page {0} of {1}" }, search : { caption: "Search...", Find: "Find", Reset: "Reset", odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with', 'does not begin with','is in','is not in','ends with', 'does not end with','contains','does not contain'], groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], matchText: " match", rulesText: " rules" }, ...
formatter : { integer : {thousandsSeparator: " ", defaultValue: '0'}, number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'}, currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'}, date : { dayNames: [ "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], monthNames: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], ...
通过修改 这些文本,可以达到自定义的目的。
3 以代码的方式,重写语言默认的文本
可以在 Model 和 Controller 中以代码的方式,改变 edit dialog 的文本。
改变之前,默认为:
edit : { editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel" }
在 Controller 中改变
JQGridModel.EditDialogSettings.Caption = "My New Caption";
JQGridModel.EditDialogSettings.SubmitText = "My Submit Text";
JQGridModel.EditDialogSettings.CancelText = "My Cancel Text";
4 以代码的方式,改变语言包
在这种情况下,与其直接将文件添加懂啊header,不如使用 viewData 替代。
<head id="Head1" runat="server"> ... <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src='<%= ViewData["localeScript"] %>'></script> <script type="text/javascript" src="http://www.trirand.net/aspnetmvc/Scripts/jqgrid/jquery.jqGrid.min.js"></script> ... </head>
这会默认使用 英语。我们可以在服务端代码中修改。如Controller:
// locale can be passed as a GET parameter from a dropdownlist for example public ActionResult FunctionalityLocalization(string locale) { string jsLocale = locale ??"grid.locale-en.js"; ViewData["localesList"] = GetLocales(jsLocale); ViewData["localeScript"] ="http://www.trirand.net/aspnetmvc/Scripts/jqgrid/i18n/"+ jsLocale; // Pass the custmomized grid model to the View return View(GetGridModel()); } public SelectList GetLocales(string selectedValue) { List<SelectListItem> countries =new List<SelectListItem>(); countries.Add(new SelectListItem { Text ="English", Value ="grid.locale-en.js" }); countries.Add(new SelectListItem { Text ="German", Value ="grid.locale-de.js" }); countries.Add(new SelectListItem { Text ="French", Value ="grid.locale-fr.js" }); returnnew SelectList(countries, "Value", "Text", selectedValue); }