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. jQuery源码分析-构造函数详解

    在jQuery.js的构造函数中,充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求,以至于一个函数可以实现多种功能需求,也为JavaScript语言的多态性提供了基础,在 ...

  2. 【LeetCode】Number of Islands

    Number of Islands 问题描写叙述 Given a 2d grid map of '1's (land) and '0's (water), count the number of is ...

  3. [置顶] 刘汝佳《训练指南》动态规划::Beginner （25题）解题报告汇总

    本文出自   http://blog.csdn.net/shuangde800 刘汝佳<算法竞赛入门经典-训练指南>的动态规划部分的习题Beginner  打开 这个专题一共有25题,刷完 ...

  4. LTR之RankSvm

    两种对比: 1.深度学习CNN提特征+RankSVM 之前的博客:http://www.cnblogs.com/bentuwuying/p/6681943.html中简单介绍了Learning to ...

  5. python 听课笔记（二）

  6. 转：android root tcpdump抓包强烈推荐

    转:http://www.cnblogs.com/findyou/p/3491035.html 写的相当详细且完整,业界良心. adb push d:\tcpdump /data/local/ adb ...

  7. vs 2017 正规表达式替换整行多行数据

    ((<OutputFile>..*</OutputFile>)[\S\s])[\S\s] 从 <OutputFile> 开始 到 </OutputFile&g ...

  8. 【转】application.properties 常见配置

    Various properties can be specified inside your application.properties/application.yml file or as co ...

  9. ZH奶酪：Python按行读取文件

    1:readline() file = open("sample.txt") while 1: line = file.readline() if not line: break ...

  10. 从#!/bin/bash中想到的...

    罪过罪过,开发了N年的SHELL,竟然第一次思考#!/bin/bash是啥意思?真是怀疑以前的的代码是咋开发出来的- 如果要解释#!/bin/bash是啥意思?为啥每个SHELL脚本第一行都写它哪?首 ...