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. HTML5基础扩展——地理位置、本地存储、缓存

    HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...

  2. 解决Ubuntu/debian的Apt-get 由于依赖关系安装失败的问题

    The following packages have unmet dependencies: libssl-dev: Depends: libssl0.9.8 (= 0.9.8k-7ubuntu8) ...

  3. C# WPF 滚动字幕实现

    <Window x:Class="Micro.Crawler.MainWindow" xmlns="http://schemas.microsoft.com/win ...

  4. 获取js连接参数js_args

    获取js连接参数,如下以链接: <script src="js/jscript.js?skin=green" type="text/javascript" ...

  5. 【医疗行业】关于dcm4che DICOM Toolkit：C-Move与C-Get

    在医学影像领域,DICOM标准与dcm4che的重要性毋庸置疑.幸好,这些开源的dcm4che DICOM 工具包,能对我们提供不少帮助. 在这里有很多的工具: Sources: https://gi ...

  6. POI3.10读取Excel模板填充数据后生成新的Excel文件

    private final DecimalFormat df = new DecimalFormat("#0.00"); public void test(){ String fi ...

  7. 数组的翻转（非reverse()）

    方法一: var arr = [1,2,3,4]; var arr2 = []; while(arr.length) { var num = arr.pop(); //删除数组最后一个元素并返回被删除 ...

  8. unity的 Social API

    孙广东  2015.12.23 Social API Social API 是訪问的Unity 的point 社会功能.如:• 用户配置文件• 好友列表• 成就• 统计 / 排行榜      它提供了 ...

  9. JavaWeb项目异常管理之log4j的使用教程

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6399191.html 在项目中的应用见: https://github.com/ygj0930/CoupleS ...

  10. Java通过在主循环中判断Boolean来停止线程

    Java代码: package Threads; /** * Created by Frank */ public class StopBoolean extends Thread { // 确保变化 ...