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']='';

        $userlist[1]['productid']='prd2';

        $userlist[1]['productname']='prdname2';

        $userlist[1]['listprice']='';

        $json='{"total":'.$total.',"rows":'.json_encode($userlist).'}';//重要，easyui的标准数据格式，数据总数和数据内容在同一个json中

        echo $json;

    }

}

注意：前台模板中使用按钮来调用后台的数据查询，后台使用简单的一个数组来返回前台的数据格式。这里要注意前台的JSON格式。

ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理的更多相关文章

  1. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  2. Jquery EasyUI datagrid后台数据表格生成及分页详解

    由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...

  3. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  4. jquery easyui datagrid实现数据改动

    1.单击选中待改动行 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA= ...

  5. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  6. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  7. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  8. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

  9. jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条

    jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...

随机推荐

  1. Android -- Volley解析

    Volley设计 Dispatch Thread不断从RequestQueue中取出请求,根据是否已缓存调用Cache或Network这两类数据获取接口之一,从内存缓存或是服务器取得请求的数据,然后交 ...

  2. 【Spark】SparkStreaming-如何使用checkpoint

    SparkStreaming-如何使用checkpoint sparkstreaming checkpoint 默认_百度搜索 spark streaming中使用checkpoint - HarkL ...

  3. sql 根据另一个表的数据更新当前表

    --update mchk --set shwdjh=dbo.erpzhong.zhongbz--from erpzhong--where mchk.dwmch=erpzhong.matno

  4. Linux获取进程执行时间

    1.前言    测试一个程序的执行时间,时间包括用户CPU时间.系统CPU时间.时钟时间.之前获取之前时间都是在程序的main函数用time函数实现,这个只能粗略的计算程序的执行时间,不能准确的获取其 ...

  5. Spring（十三）：使用工厂方法来配置Bean的两种方式（静态工厂方法&实例工厂方法）

    通过调用静态工厂方法创建Bean 1)调用静态工厂方法创建Bean是将对象创建的过程封装到静态方法中.当客户端需要对象时,只需要简单地调用静态方法,而不需要关心创建对象的具体细节. 2)要声明通过静态 ...

  6. Total Commander如何设置自定义快捷键在当前目录打开ConEmu

    Total Commander,简称TC,原名Windows Commander,是Windows平台下功能最强大的全能文件管理器. 自从使用了TC基本上就很少再打开Window的文件夹了,因为TC不 ...

  7. 转： git使用时让http记住帐号密码

    见 http://git.mydoc.io/?t=154710 https 方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受 https 带来的极速 按照以下设置记住密 ...

  8. unity3d shader 学习

    [浅墨Unity3D Shader编程] 着色器参考 [Unity Shaders]

  9. SQL从一个表查询数据插入/更新到另一个表

    示例一: 从数据库表A中查询出数据插入到数据库表B 从数据库DataBaseA的表TDA中查询出数据插入到数据库DataBaseB的表TDB insert into [DataBaseA].[dbo] ...

  10. 使用Chrome保存网页为mht文件

    一直在使用chrome浏览器,但由于需要将部分网页保存为mht文件,却发现chrome默认不支持.chrome浏览器默认支持2种:单独的html文件,全部: 万能的chrome怎么可能保存不了mht? ...