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. 【Java】PS-查看Java进程-线程数

    PS-查看Java进程-线程数 ps 线程 个数_百度搜索 查看进程的线程数命令 - CSDN博客 java命令行运行jar里的main类 - coderland - 博客园

  2. Mac系统下编译支持Android平台的最新X264编码器

    Mac系统下编译支持Android平台的最新X264编码器 原文来自 http://www.mingjianhua.com,转载请注明出处 1.首先去官网下载最新的x264源代码,解压到任意目录 ht ...

  3. 转：从头开始编写基于隐含马尔可夫模型HMM的中文分词器

    http://blog.csdn.net/guixunlong/article/details/8925990 从头开始编写基于隐含马尔可夫模型HMM的中文分词器之一 - 资源篇 首先感谢52nlp的 ...

  4. TextEdit 只能输入数字（0-9）的限制

    MaskType="RegEx" MaskUseAsDisplayFormat="True" Mask="[0-9]*" <dxe:T ...

  5. Linq-进行Json序列化的过程中出现错误解决办法

    错误截图如下: 这是因为表t_sysuser与表t_sysrole之间存在外键联系导致的 解决办法: 进入到创建的linq to sql类中,右键[属性]-将序列化模式修改为[单向]保存即可

  6. Mysql 创建表时错误:Tablespace for table `tablexx` exists. Please DISCARD the tablespace before IMPORT.

    在本地的一个数据库创建表时意外的出现了以下错误,说是表已经存在了 但通过desc 查看表信息时又说表不存在 在本地系统搜索表名却发现一个.ibd文件[InnoDB File] 在删除了该.ibd文件文 ...

  7. 无脑抢标——算了吧

    第一版时,我对拍拍贷是恐惧的,缓解我的恐惧的方法,就是寻找尽可能安全的方案.然后,我就发现了这个策略:超过信用等级普通利率的标的.A标一般16,B一般18--那我就寻找大于16的A,大于18的B,C我 ...

  8. Web.config的Release版本和Debug版本不一样的奥秘

      VS编译完后,release版本的web.config(或者app.config) 为什么不一样那? 我们查看一下项目结构,会发现有两个版本的config文件存在: 打开web.Debug.con ...

  9. form表单的reset

    $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .rem ...

  10. jQuery 图片裁剪插件 Jcrop

    Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...