ThinkPHP+jQuery EasyUI Datagrid查詢資料的簡單處理

weixin_34198583發表於2015-01-27
PHPjQueryUI

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格式。

相關文章