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']=''; $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查询数据的简单处理的更多相关文章
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- Jquery EasyUI datagrid后台数据表格生成及分页详解
由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...
- jQuery easyui datagrid 的数据加载
其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...
- jquery easyui datagrid实现数据改动
1.单击选中待改动行 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA= ...
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 谈谈easyui datagrid 的数据加载(转)
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 再次谈谈easyui datagrid 的数据加载
from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...
- 谈谈easyui datagrid 的数据加载
文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...
- jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条
jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...
随机推荐
- jQuery源码分析-构造函数详解
在jQuery.js的构造函数中,充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求,以至于一个函数可以实现多种功能需求,也为JavaScript语言的多态性提供了基础,在 ...
- 【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 ...
- [置顶] 刘汝佳《训练指南》动态规划::Beginner (25题)解题报告汇总
本文出自 http://blog.csdn.net/shuangde800 刘汝佳<算法竞赛入门经典-训练指南>的动态规划部分的习题Beginner 打开 这个专题一共有25题,刷完 ...
- LTR之RankSvm
两种对比: 1.深度学习CNN提特征+RankSVM 之前的博客:http://www.cnblogs.com/bentuwuying/p/6681943.html中简单介绍了Learning to ...
- python 听课笔记(二)
- 转:android root tcpdump抓包强烈推荐
转:http://www.cnblogs.com/findyou/p/3491035.html 写的相当详细且完整,业界良心. adb push d:\tcpdump /data/local/ adb ...
- vs 2017 正规表达式替换整行多行数据
((<OutputFile>..*</OutputFile>)[\S\s])[\S\s] 从 <OutputFile> 开始 到 </OutputFile&g ...
- 【转】application.properties 常见配置
Various properties can be specified inside your application.properties/application.yml file or as co ...
- ZH奶酪:Python按行读取文件
1:readline() file = open("sample.txt") while 1: line = file.readline() if not line: break ...
- 从#!/bin/bash中想到的...
罪过罪过,开发了N年的SHELL,竟然第一次思考#!/bin/bash是啥意思?真是怀疑以前的的代码是咋开发出来的- 如果要解释#!/bin/bash是啥意思?为啥每个SHELL脚本第一行都写它哪?首 ...