EasyUI的datagrid显示远程的json数据

最新推荐文章于 2021-03-20 12:31:55 发布

孟哥1989

最新推荐文章于 2021-03-20 12:31:55 发布

阅读量3k

点赞数

分类专栏： Web开发文章标签： easyui php

本文链接：https://blog.csdn.net/liumengcheng/article/details/22440839

版权

Web开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

后台php代码：

<?php
echo '
	[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
	]
    ';
?>

前台html代码（直接基于EasyUI的示例代码修改而得）：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<table id="dg"></table>
	<script>
		$('#dg').datagrid({
		url:null,
		columns:[[
        {field:'productid',title:'productid',width:100},
        {field:'productname',title:'productname',width:100},
        {field:'unitcost',title:'unitcost',width:100},
		{field:'status',title:'status',width:100},
        {field:'listprice',title:'listprice',width:100},
        {field:'attr1',title:'attr1',width:100},
		{field:'itemid',title:'itemid',width:100}
		]]
		});
		$.getJSON("http://192.168.56.25/Chapter34/json.php",
		function(data){
		$('#dg').datagrid('loadData', data);
		});
	</script>
</body>
</html>

最终的效果是：