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 id="easyuiTheme" 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 id='b1'>Button1</button> <button id='b2'>Button2</button> <div id='test'> This is a div ! </div> <button id='b3'>Button3</button> <table id='mygrid'></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 style="padding: 24px 48px;"> <h1>:)</h1><p>歡迎使用 <b>ThinkPHP</b>！</p><br/>[ 您現在訪問的是Home模塊的Index控制器 ]</div><script type="text/javascript" src="http://tajs.qq.com/stats?sId=9347272" 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格式。