easyui 乱码问题

StormFour 发布于 2013/01/11 23:17
阅读 8K+
收藏 0

开源之夏第三届火热来袭,高校学生参与赢万元奖金!>>>

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Complex DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>
    	<link rel="stylesheet" type="text/css" href="themes/icon.css"/>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    
	<script>
		$(function(){
			$('#test').datagrid({
				title:'My DataGrid',
				iconCls:'icon-save',
				width:700,
				height:370,
				nowrap: true,
				autoRowHeight: false,
				striped: true,
				collapsible:true,
				url:'datagrid_data.php',
				sortName: 'id',
				sortOrder: 'asc',
				remoteSort: false,
				idField:'id',
				columns:[[
	                {field:'ck',checkbox:true},
                    {title:'id',field:'id',sortable:true},
	                {title:'userid',field:'userid',width:80,sortable:true},
                    {field:'name',title:'名称'},
					{field:'sj',title:'sj',width:100,align:'center'},
					{field:'email',title:'email',width:220}
				]],
				pagination:true,
				rownumbers:true,
				toolbar:[{
					id:'btnadd',
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('add')
					}
				},{
					id:'btncut',
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('cut')
					}
				},'-',{
					id:'btnsave',
					text:'Save',
					disabled:true,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						alert('save')
					}
				}]
			});
			var p = $('#test').datagrid('getPager');
			$(p).pagination({
				onBeforeRefresh:function(){
					alert('before refresh');
				}
			});
            
            $('#test').pagination({
             	pageList: [10,20,50,100]
            });
		});
        


        
		function getSelected(){
			var selected = $('#test').datagrid('getSelected');
			if (selected){
				alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
			}
		}
		function getSelections(){
			var ids = [];
			var rows = $('#test').datagrid('getSelections');
			for(var i=0;i<rows.length;i++){
				ids.push(rows[i].code);
			}
			alert(ids.join(':'));
		}
		function clearSelections(){
			$('#test').datagrid('clearSelections');
		}
		function selectRow(){
			$('#test').datagrid('selectRow',2);
		}
		function selectRecord(){
			$('#test').datagrid('selectRecord','002');
		}
		function unselectRow(){
			$('#test').datagrid('unselectRow',2);
		}
		function mergeCells(){
			$('#test').datagrid('mergeCells',{
				index:2,
				field:'addr',
				rowspan:2,
				colspan:2
			});
		}
	</script>
</head>
<body>
	<h2>Complex DataGrid</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Click the button to do actions with datagrid.</div>
	</div>
	
	<div style="margin:10px 0;">
		<a href="#" onclick="getSelected()">GetSelected</a>
		<a href="#" onclick="getSelections()">GetSelections</a>
		<a href="#" onclick="selectRow()">SelectRow</a>
		<a href="#" onclick="selectRecord()">SelectRecord</a>
		<a href="#" onclick="unselectRow()">UnselectRow</a>
		<a href="#" onclick="clearSelections()">ClearSelections</a>
		<a href="#" onclick="resize()">Resize</a>
		<a href="#" onclick="mergeCells()">MergeCells</a>
	</div>
	
	<table id="test"></table>
	
</body>
</html>

如果grid title中是中文的话前台就显示乱码,有没有人遇到过,不忘吝啬请教

加载中
0
宏哥
宏哥

不用我解释, 你都知道最好的解决方法是什么了.

Don't make troubles before troubles get you 

0
宏哥
宏哥
该评论暂时无法显示,详情咨询 QQ 群:点此入群
0
szf
szf
columns:[[

                    {field:'ck',checkbox:true},

                    {title:'id',field:'id',sortable:true},

                    {title:'userid',field:'userid',width:80,sortable:true},

                    {field:'name',title:'名称'},

                    {field:'sj',title:'sj',width:100,align:'center'},

                    {field:'email',title:'email',width:220}

                ]],

这是个典型的页面编码问题,在中文win环境下,大多编辑器使用了GBK字符集进行文字处理。

也就是说,上面的“名称”在你的html文件中,事实上是以GBK编码存在的。

而你的页面charset指示是UTF-8,浏览器就会按UTF-8去解析GBK编码的"名称"二字,所以就显示口口了。

有两个方法可以做:

1.把你的页面charset指示改为GBK, 同时把其它ajax调用的编码都改为GBK

2.把你的页面实际编码修改为UTF-8, 比如使用notepad++打开它,然后在“格式”菜单中选择“转为无BOM UTF-8” 再保存。

如果你在Linux桌面中使用zh_CN.UTF-8 或 en_US.UTF-8的locale环境工作,就不会出现这种问题。

0
StormFour
StormFour

引用来自“szf”的答案

columns:[[

                    {field:'ck',checkbox:true},

                    {title:'id',field:'id',sortable:true},

                    {title:'userid',field:'userid',width:80,sortable:true},

                    {field:'name',title:'名称'},

                    {field:'sj',title:'sj',width:100,align:'center'},

                    {field:'email',title:'email',width:220}

                ]],

这是个典型的页面编码问题,在中文win环境下,大多编辑器使用了GBK字符集进行文字处理。

也就是说,上面的“名称”在你的html文件中,事实上是以GBK编码存在的。

而你的页面charset指示是UTF-8,浏览器就会按UTF-8去解析GBK编码的"名称"二字,所以就显示口口了。

有两个方法可以做:

1.把你的页面charset指示改为GBK, 同时把其它ajax调用的编码都改为GBK

2.把你的页面实际编码修改为UTF-8, 比如使用notepad++打开它,然后在“格式”菜单中选择“转为无BOM UTF-8” 再保存。

如果你在Linux桌面中使用zh_CN.UTF-8 或 en_US.UTF-8的locale环境工作,就不会出现这种问题。

谢谢,在你提醒下,我看了下我的浏览器编码,是UTF-8,改为GB2313编码的就可以显示了。
0
StormFour
StormFour

引用来自“宏哥”的答案

不用我解释, 你都知道最好的解决方法是什么了.

Don't make troubles before troubles get you 

宏哥的页面是什么样的?能否show出来参考一下
0
宏哥
宏哥

引用来自“StormFour”的答案

引用来自“宏哥”的答案

不用我解释, 你都知道最好的解决方法是什么了.

Don't make troubles before troubles get you 

宏哥的页面是什么样的?能否show出来参考一下

我做过贴图, 你得自己找了.

就是简单的html.

osc查找信息很不方便, 哪怕是自己的信息. 不能针对自己的信息进行搜索.

拜 lucence 这些烂玩意所赐.

0
宏哥
宏哥
http://www.oschina.net/question/96003_64188?sort=time

我做出来基本上也是这个样子.

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部