easyUI解决jsonp跨域问题
html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js渲染表格</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.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<script src="myScript.js"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid"></table>
</body>
</html>
js代码:
$(function () {
$("#dg").datagrid({
loader:function(param,success,error){
//跨域请求数据
$.ajax({
async:false,
url:"http://192.168.1.106:8080/easyUI/db.php",
type:"get",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"callback",
success: function (res) {
success(res);
},
error: function (xhr) {
error(xhr.responseText);
}
})
},
width:400,
title:"用户列表",
iconCls:"icon-search",
//两个数组是为了合并单元格
columns:[[
{title:"姓名",field:"name"},
{title:"年龄",field:"age"},
{title:"邮箱",field:"email"}
]]
})
})
在loader函数里,可以使用ajax获取数据,将数据传给success函数渲染到表格上。
数据格式:
显示结果: