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. centos6安装ElasticSearch5.6.5错误记录

    在centos6安装ES的时候遇到不少问题.这里记录日志.以后安装一定要升级centos7,别说啥稳定问题了,该升级就升级. [1]: max file descriptors [4096] for ...

  2. Android -- Canvas java.lang.UnsupportedOperationException

    干货 java.lang.UnsupportedOperationException at android.view.GLES20Canvas.clipPath(GLES20Canvas.java:2 ...

  3. http://blog.csdn.net/u014595019/article/details/52805444

    http://blog.csdn.net/u014595019/article/details/52805444 tensorflow笔记系列: (一) tensorflow笔记:流程,概念和简单代码 ...

  4. 解决PHP使用CVS导出Excel乱码问题

    在使用PHP生成CVS文件后通过Excel打开发现中文全部变成了乱码,之前在我本地win08通过WPS正常的,但上传到服务器Linux在服务器上测试出现了乱码 一开始以后是Linux的问题但后来测试时 ...

  5. Log4net的不能产生Log文件的问题

    [问题] 用如下的步骤应用了Log4Net: 建立了一个公用的项目, 在里面引入了Log4net的Nuget package. 在公用的项目中建立了一个类,加上了Log4net的attribute. ...

  6. 判断一个整数是否是2的n次方

    参考:http://bbs.csdn.net/topics/370058619 如题,如何判断一个整数是否是2的N次方,我能想到的方法有两个 1.一直除2,看最后是否等于1.(最笨的方法) 2.转换成 ...

  7. 命令行下从bak文件恢复sqlserver数据库方法

    命令行下从bak文件恢复sqlserver数据库方法 注:本文所示访问从SqlServer 2000 - 2014版都是通用的 参考:http://blog.sina.com.cn/s/blog_5c ...

  8. win8下everything无法使用的解决方法

    今日我电脑上的Everything打开后都无法使用了,只显示几个分区,重装之后暂时就好了,重启电脑又坏了 解决方法:运行services.msc,启动everything.然后重启everything ...

  9. Direct2D教程III——几何（Geometry）对象

    目前博客园中成系列的Direct2D的教程有 1.万一的 Direct2D 系列,用的是Delphi 2009 2.zdd的 Direct2D 系列,用的是VS中的C++ 3.本文所在的 Direct ...

  10. SpringBoot开发详解（六）-- 异常统一管理以及AOP的使用

    https://blog.csdn.net/qq_31001665/article/details/71357825