grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/easyui/demo/demo.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></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 class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'data.php',method:'get'">
<thead>
<tr>
<th data-options="field:'value',width:180">value</th>
<th data-options="field:'color',width:100">color</th>
</tr>
</thead>
</table>
</body>
</html>
<?php
$json = array(
'total'=> 3,
'rows'=>array(
array(
'value'=>'1',
'color'=>"#DC143C"
),
array(
'value'=>'2',
'color'=>"#8B1A1A"
),
array(
'value'=>'3',
'color'=>"#FF0000"
),
array(
'value'=>'5',
'color'=>"#FF00FF"
)
)
);
$json = json_encode($json);
echo $json;
?>