JqGrid国际化---随笔

最新推荐文章于 2022-12-05 23:52:55 发布

akieay

最新推荐文章于 2022-12-05 23:52:55 发布

阅读量628

点赞数

文章标签： js jqgrid

本文链接：https://blog.csdn.net/qq_39668819/article/details/105684065

版权

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});
}

akieay

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JqGrid国际化---随笔

JqGrid国际化插件jqgrid国际化插件：https://download.csdn.net/download/qq_39668819/12350915demo下载地址：https://download.csdn.net/download/qq_39668819/12351487通过动态的加载不同的国际化语言插件来实现 JqGrid语言的切换语言切换工具类: common.js...
复制链接

扫一扫