ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理
ThinkPHP和jQuery EasyUI这两个都是不错的框架，现在要把它两个整合到一块，做个简单的Ajax调用查询。
在ThinkPHP模板中引入EasyUI的相关文件，然后设置按钮3的调用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>easyui app</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/jquery-easyui-1.4.1/themes/{$_COOKIE.easyuiThemeName|default="default"}/easyui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/js/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript" src="__PUBLIC__/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
//$.messager.alert('提示信息','Hello,Garfield !');
$("#b1").click(function(){
$('#test').html('button1 click');
});
$("#b2").click(function(){
$('#test').html('button2 click');
});
$("#b3").click(function(){
$('#mygrid').datagrid({
title:'Hello garfield',
width:320,
//直接读取数据
//url:'__PUBLIC__/data/datagrid_data1.json',
url:'{:U("Index/read")}',
columns:[[
{field:'productid',title:'Code',width:100},
{field:'productname',title:'Name',width:100},
{field:'listprice',title:'Price',width:100,align:'right'}
]]
});
});
});
</script>
<script type="text/javascript" src="__TMPL__/Index/initApp.js" charset="utf-8"></script>
</head>
<body>
<button >Button1</button>
<button >Button2</button>
<div >
This is a div !
</div>
<button >Button3</button>
<table ></table>
</body>
</html>ThinkPHP后台控制器增加read方法：
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
//$this->show('<style type="text/css">*{ padding: 0; margin: 0; } div{ padding: 4px 48px;} body{ background: #fff; font-family: "微软雅黑"; color: #333;font-size:24px} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.8em; font-size: 36px }</style><div > <h1>:)</h1><p>欢迎使用 <b>ThinkPHP</b>！</p><br/>[ 您现在访问的是Home模块的Index控制器 ]</div><script type="text/javascript" src="http://tajs.qq.com/stats?s charset="UTF-8"></script>','utf-8');
$this->display();
}
public function read(){
$total=2;
$userlist[0]['productid']='prd1';
$userlist[0]['productname']='prdname1';
$userlist[0]['listprice']='10';
$userlist[1]['productid']='prd2';
$userlist[1]['productname']='prdname2';
$userlist[1]['listprice']='20';
$json='{"total":'.$total.',"rows":'.json_encode($userlist).'}';//重要，easyui的标准数据格式，数据总数和数据内容在同一个json中
echo $json;
}
}注意：前台模板中使用按钮来调用后台的数据查询，后台使用简单的一个数组来返回前台的数据格式。这里要注意前台的JSON格式。
