php使用easyui
原创
©著作权归作者所有:来自51CTO博客作者钰娘娘ynn的原创作品,请联系作者获取转载授权,否则将追究法律责任
弄了半天都不出数据,看了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,当然,需要检查一下能不能用。可以拷贝上面的代码,如果看到上方的:
这个部分,则导入成功。
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);