jqueryEasyUI datagrid 跨域获取数据。

jQuery EasyUI datagrid 解决跨域获取JSON数据问题

最新推荐文章于 2024-07-21 02:50:12 发布

shuo188

最新推荐文章于 2024-07-21 02:50:12 发布

阅读量6.8w

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery jqueryEasyUI datagrid ajax json

本文链接：https://blog.youkuaiyun.com/shuo188/article/details/48300327

本文介绍了如何使用jQuery EasyUI的datagrid组件跨域获取JSON数据。通常datagrid的url需指向本地链接，但通过修改jqueryEasyUI源代码，添加对jsonp的支持，可以实现跨域请求。在jquery.easyui.min.js（1.4.3版）中增加相应的ajax处理，根据请求类型选择执行json或jsonp请求，从而解决跨域问题。

一般情况下，在用jquery easyUI中的datagrid展示数据时，url属性值是必须要本地链接而且数据为json格式。在日常的工作中，可能会有需要通过URL接口去读取别人的json数据，然后就会存在跨域的问题。其实在jquery中大家都知道可以通过jsonp去解决跨域问题，而jqueryEasyUI又是基于jquery，所以修改一下jqueryEasyUI源文件其实就可以了，最直接的就是多加一个ajax。然后做个判断区分json和jsonp时执行哪一个ajax。具体看一下下面，大家应该就知道了。

jquery.easyui.min.js（1.4.3版本）

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="JqueryEasyUI/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="JqueryEasyUI/themes/icon.css">
	<script type="text/javascript" src="JqueryEasyUI/jquery.min.js"></script>
	<script type="text/javascript" src="JqueryEasyUI/jquery.easyui.min.js"></script>
<script>
		$(function(){
			$('#test').datagrid({
				title:'My DataGrid',
				width:800,
				height:350,
				nowrap: true,
				autoRowHeight: false,
				striped: false,
				collapsible:true,
				remoteSort: false,
				pagination:true,
				rownumbers:true,
				fitColumns:true,
				<span style="color:#CC0000;">jsonp:true,//添加的一个属性，作判断用，对应看一下上图的if</span>
				url:"http://localhost:8080/Test_20150906/test.action",
				method:'get'
			});
			var p = $('#test').datagrid('getPager');
			$(p).pagination({
				onBeforeRefresh:function(){
					alert('before refresh');
				}
			});
		});
	</script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<p>The DataGrid is created from markup, no JavaScript code needed.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="test" cellspacing="0" cellpadding="0"> 
		<thead> 
			<tr> 
				<th field="password" width="100">部门</th> 
			</tr> 
		</thead> 
	</table>
</body>
</html>

相应的地方可以按自己的需要修改，比如callback等等。