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
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- jqGrid组件基础样式包-必要 -->
<link rel="stylesheet" href="plug-in/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" href="plug-in/bootstrap/bootstrap.min.css"/>
<!-- jqGrid主题包-非必要 -->
<!-- 在jqgrid/css/css这个目录下还有其他的主题包,可以尝试更换看效果 -->
<link rel="stylesheet" href="plug-in/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
<!-- jquery插件包-必要 -->
<!-- 这个是所有jquery插件的基础,首先第一个引入 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="plug-in/bootstrap/bootstrap.min.js"></script>
<!-- jqGrid插件包-必要 -->
<script type="text/javascript" src="plug-in/jqgrid/js/jquery.jqGrid.src.js"></script>
<!-- jqGrid插件的多语言包-非必要 -->
<!-- 在jqgrid/js/i18n下还有其他的多语言包,可以尝试更换看效果 -->
<!--<script type="text/javascript" src="plug-in/jqgrid/js/i18n/grid.locale-en.js"></script>-->
<title>国际化demo</title>
<!-- 本页面初始化用到的js包,创建jqGrid的代码就在里面 -->
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<ul class="layui-nav larry-header-item">
<li role="presentation" class="dropdown layui-nav-item">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="language_title">语言</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu language">
<li id="zh_CN_lang" class="lang-item lan_zh">中文</li>
<li id="en_US_lang" class="lang-item lan_en" style="border-bottom: none;">English</li>
</ul>
</li>
</ul>
<table id="list"></table>
<div id="pager"></div>
<br>
以上为创建jqGrid的简单例子。想了解全功能api,请移步<a href="http://blog.mn886.net/jqGrid">http://blog.mn886.net/jqGrid</a>
</body>
<style type="text/css">
.language{
margin-left: -28px;
background-color: #393D49;
margin-bottom: 0px;
}
.lang-item{
background-color: #393D49;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
border-bottom: #F4FCFF solid 1px;
letter-spacing: 2px;
color: #FFFFFF;
}
.lang-active{
background-color: #FFF7E1;
color: #0C0C0C;
}
.lang-item:active{
background-color: #FFF7E1;
color: #0C0C0C;
}
.language li:focus{
background-color: #FFF7E1;
}
.language_title{
letter-spacing: 3px;
font-size: 15px;
}
.lan_account_en_US, .lan_pwd_en_US, .lan_new_pwd_en_US{
width: 100px;
}
a:focus{
text-decoration:none
}
</style>
</html>
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});
}