一.HTML模板的编写
要点:
1. table class=”easyui-datagrid” 设定table样式以及JS
2. table pagination=”true” 开启分页
3. table url 设定table的数据来源,这里需要设定服务器接口的url地址.thinkphp使用U发方法进行生成
4. th field 设定服务器回传数据与table列的映射
5. 最重要的是,要引入样式与css.放到/项目/Public/easyui下
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/demo/demo.css">
<script type="text/javascript" src="__PUBLIC__/easyui/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic CRUD Application</h2>
<p>Click the buttons on datagrid toolbar to do crud actions.</p>
<table id="dg" url="{:U('Analysis/showAllDevicesInterface','','')}" class="easyui-datagrid" title="My Users" pagination="true">
<thead>
<tr>
<th field="device_id" >Item ID</th>
<th field="os_version" width="120">Product ID</th>
<th field="manufacturer" width="80" align="right">List Price</th>
<th field="model" width="80" align="right">Unit Cost</th>
<th field="cpu_abi" width="200">Attribute</th>
<th field="screen" width="60" align="center">Stauts</th>
</tr>
</thead>
</table>
二. 显示模板的方法
public function showAllReports() {
$this->display();
}
三. 服务器端接口的编写
要点
1. 浏览器js传输参数都服务器端,所以要求接受参数为
page=1,
rows=10
2. 要求返回数据为json格式
{‘total’:12,’rows’:[数据]}
public function showAllDevicesInterface($page=1,$rows=10) {
$deviceModel = M('device_info');
//统计所有数据总数
$result["total"] =$deviceModel->count();
//计算当前偏移值
$offset=($page-1)*$rows;
//查询指定分页的数据
$devices = $deviceModel->limit($offset,$rows)->select();
//设置入result
$result['rows']=$devices;
//返回json数据
echo json_encode($result);
}