ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理

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']='10';$userlist[1]['productid']='prd2';$userlist[1]['productname']='prdname2';$userlist[1]['listprice']='20';$json='{"total":'.$total.',"rows":'.json_encode($userlist).'}';//重要，easyui的标准数据格式，数据总数和数据内容在同一个json中echo $json;}
}

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

转载于:https://www.cnblogs.com/GarfieldTom/p/4252438.html

ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理相关推荐

jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重 ...
easyUI -datagrid表格数据不显示
出现easyUI -datagrid表格数据无法显示这种情况的可能原因有多方面的,可能是因情况而异吧,现在说一下日常做项目中我遇到过的这几个方面(原因二是我遇到过的,在网上看到也是常有的) 前提: 在 ...
jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...
JQuery EasyUI DataGrid 、tree查询
1.DataGrid查询 queryParams = $('#dg').datagrid('options').queryParams; queryParams.action = 'target'; ...
jquery easyui datagrid 分页详解
http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html 由于项目原因,用了jquery easyui 感觉界面不错,皮肤样 ...
jQuery EasyUI DataGrid 分页 FOR ASP.NET
源代码: 前台(html): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...

ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理

ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理相关推荐

最新文章

热门文章