JqGrid国际化---随笔
JqGrid国际化插件
jqgrid国际化插件：https://download.csdn.net/download/qq_39668819/12350915
demo下载地址：https://download.csdn.net/download/qq_39668819/12351487
通过动态的加载不同的 国际化语言插件来实现 JqGrid语言的切换
语言切换工具类: common.js
/**
* 切换JqGrid
* @param language 语言
* @param path 语言包路径
*/
function switchJqGridLanguage(language, index) {
if(isBlank(language)){
language = localStorage.getItem("language");
}
if(language == 'zh_CN'){
$("#en_US").attr('src', 'about:blank');
$("#en_US").remove();
if(parseInt(index) > 0){
lastLoadJsFileIndex('/JqGridDemo/plug-in/jqgrid/js/i18n/grid.locale-cn.js', language, index);
}else{
lastLoadJsFileId('/JqGridDemo/plug-in/jqgrid/js/i18n/grid.locale-cn.js', language);
}
}else{
$("#zh_CN").attr('src', 'about:blank');
$("#zh_CN").remove();
if(parseInt(index) > 0){
lastLoadJsFileIndex('/JqGridDemo/plug-in/jqgrid/js/i18n/grid.locale-en.js', language, index);
}else{
lastLoadJsFileId('/JqGridDemo/plug-in/jqgrid/js/i18n/grid.locale-en.js', language);
}
}
}
/**
* 针对数据模板的JS文件可以调用此方法用来在文件后缀随机数,每次都下载最新的
* @param path 路径
* @param id id属性值
* @param index 位置, 0为最后，1为倒数第二，依次类推
*/
function lastLoadJsFileIndex(path, id, index) {
var randomh = Math.random();
var arr = document.getElementsByTagName("script");
if(isBlank(index)){
index = 0;
}
var e = arr[arr.length - (1+index)];
var d = generateJsNode(randomh, path, id);
insertAfterTime(d, e, 100)
};
function lastLoadJsFileId(path, id) {
var randomh = Math.random();
var arr = document.getElementsByTagName("script");
var e = arr[arr.length - 1];
var d = generateJsNode(randomh, path, id);
insertAfter(d, e)
};
function lastLoadJsFile(path) {
var randomh = Math.random();
var arr = document.getElementsByTagName("script");
var e = arr[arr.length - 1];
var d = generateJsNode(randomh, path, null);
insertAfter(d, e)
};
/**
* 生成javaScript标签
* @param randomh
* @param path
* @param id
* @returns {HTMLElement}
*/
function generateJsNode(randomh, path, id) {
var d = document.createElement("script");
if(!isBlank(id)){
d.id = id;
}
d.src = path + "?x=" + randomh + "";
d.type = "text/javascript";
d.async = true;
d.defer = true;
return d;
}
/**
* 在指定节点后插入新节点, 并指定时间后重新加载页面
* @param newElement
* @param targetElement
*/
function insertAfterTime(newElement, targetElement, time){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
setTimeout(function () {
window.location.reload();
}, time);
}
/**
* 在指定节点后插入新节点
* @param newElement
* @param targetElement
*/
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
/**
* 判断是否为空
* @param value
* @returns true: 为空 false: 不为空
*/
function isBlank(value) {
return !value || !/\S/.test(value)
}
使用案例
index.html
"cn">
"Content-Type" content="text/html; charset=UTF-8">
"stylesheet" href="plug-in/jqgrid/css/ui.jqgrid.css" />
"stylesheet" href="plug-in/bootstrap/bootstrap.min.css"/>
"stylesheet" href="plug-in/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
国际化demo
"layui-nav larry-header-item">
- "presentation" class="dropdown layui-nav-item">
"dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
"language_title">语言
"caret">
"dropdown-menu language">
- "zh_CN_lang" class="lang-item lan_zh">中文
- "en_US_lang" class="lang-item lan_en" style="border-bottom: none;">English
以上为创建jqGrid的简单例子。想了解全功能api，请移步http://blog.mn886.net/jqGrid
index.js
$(function(){
var lang = localStorage.getItem("language");
if(isBlank(lang)){
lang = "zh_CN";
}
$(".lang-item").removeClass("lang-active");
$("#"+lang+"_lang").addClass("lang-active");
switchJqGridLanguage(null, 0);
$(".lang-item").click(function () {
var val = $(this).html();
if (val === "英文" || val === "English") {
LANGUAGE_Index = "en_US";
} else {
LANGUAGE_Index = "zh_CN";
}
$(".lang-item").removeClass("lang-active");
localStorage.setItem("language", LANGUAGE_Index);
$("#"+LANGUAGE_Index+"_lang").addClass("lang-active");
switchJqGridLanguage(LANGUAGE_Index, 1);
});
//保证先加载国际化插件在加载 jqgrid
setTimeout(function () {
pageInit(lang);
}, 500);
});
function pageInit(lang){
var colNames = [];
var caption = "";
if(lang == 'zh_CN'){
colNames = [ '发票编号','日期','客户','合计','税','全部','笔记' ];
caption = "测试案例";
}else if(lang == 'en_US'){
colNames = [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ];
caption = "TEST Example";
}
//创建jqGrid组件
$("#list").jqGrid(
{
url : 'data/JSONData.json',//组件创建完成之后请求数据的url
datatype : "json",//请求数据返回的类型。可选json,xml,txt
colNames : colNames,//jqGrid的列显示名字
colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
{name : 'id',index : 'id',width : 55},
{name : 'invdate',index : 'invdate',width : 90},
{name : 'name',index : 'name asc, invdate',width : 100},
{name : 'amount',index : 'amount',width : 80,align : "right"},
{name : 'tax',index : 'tax',width : 80,align : "right"},
{name : 'total',index : 'total',width : 80,align : "right"},
{name : 'note',index : 'note',width : 150,sortable : false}
],
rowNum : 10,//一页显示多少条
rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
pager : '#pager',//表格页脚的占位符(一般是div)的id
sortname : 'id',//初始化的时候排序的字段
sortorder : "desc",//排序方式,可选desc,asc
mtype : "post",//向后台请求数据的ajax的类型。可选post,get
viewrecords : true,
caption : caption//表格的标题名字
});
/*创建jqGrid的操作按钮容器*/
/*可以控制界面上增删改查的按钮是否显示*/
$("#list").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : false});
}