弄了半天都不出数据,看了2个多小时终于加载出数据了,这里总结一下步骤。暂时是最简单的,只显示数据,不进行数据操作。
先上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="/mine/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/mine/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="My Users" style="width:550px;height:250px"
toolbar="#toolbar" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="50" editor="{type:'validatebox',options:{required:true}}">ID</th>
<th field="user_id" width="50" editor="{type:'validatebox',options:{required:true}}">UID</th>
<th field="time" width="50" editor="text">TIME</th>
<th field="type" width="50" editor="{type:'validatebox',options:{required:'true'}}">TYPE</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script>'#dg').datagrid({
url: '/index/index/test2',
});
</script>

</body>
</html>

test2请求内容:

$result = Db::table('o_attend')
->select();
$arr['total']=sizeof($result);
$arr['rows']=$result;
echo json_encode($arr);

test2返回格式:

{
"total": 2,
"rows": [{
"id": 1,
"user_id": "1",
"time": "1",
"type": 1}, {
"id": 2,
"user_id": "1",
"time": "1",
"type": 2}]
}

参考:​​http://www.jeasyui.net/tutorial/147.html​​​
关键点描述:

1. 导入库

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="/mine/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/mine/easyui/jquery.easyui.min.js"></script>

下载地址:​​http://www.jeasyui.com/download/index.php​

选择左边的EasyUI for jqurey,然后导入jquery.min.js和jquery.easyui.min.js,当然,需要检查一下能不能用。可以拷贝上面的代码,如果看到上方的:

php使用easyui_ico


这个部分,则导入成功。

2.table的头部

这里的table的id是要使用的,需要取一个不会重复的id。另一个关键点是标签,此处需要写一个属性field,此处field要和获取的数据的列名名字相同,th个数需要和列数相同。

<table id="dg" title="My Users" style="width:550px;height:250px"
toolbar="#toolbar" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="50" editor="{type:'validatebox',options:{required:true}}">ID</th>
<th field="user_id" width="50" editor="{type:'validatebox',options:{required:true}}">UID</th>
<th field="time" width="50" editor="text">TIME</th>
<th field="type" width="50" editor="{type:'validatebox',options:{required:'true'}}">TYPE</th>
</tr>
</thead>
</table>

3.js导入数据

此处注意$(‘#dg’)的格式是#加上上面table的id

<script>'#dg').datagrid({
url: '/index/index/aaa',
});
</script>

4.php处理

注意,这里的json格式,一定是分为total和rows两个索引的,total里面放的数据的数目,rows里面的数据一定要和数据相匹配,列名和上面的field名字相同。

$result = Db::table('o_attend')
->select();
$arr['total']=sizeof($result);
$arr['rows']=$result;
echo json_encode($arr);