jQuery easyui datagrid动态查询数据实例讲解


Posted in Javascript onFebruary 26, 2013

该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例
HTML前端代码

<?php 
include_once("auth.php"); 
?> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="/inc/js/EasyUI/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="/inc/js/EasyUI/themes/icon.css"> 
<script type="text/javascript" src="/inc/js/EasyUI/jquery-1.8.0.min.js"></script> 
<script type="text/javascript" src="/inc/js/EasyUI/jquery.easyui.min.js"></script> 
<script> 
function FindData(){ 
$('#mytable').datagrid('load',{ 
PersonCode:$('#PersonCode').val(), 
KQYM:$('#KQYM').val()} 
); 
} 
</script> 
</head> 
<body> 
<table id='mytable' class="easyui-datagrid" style="width:600px;height=500px" 
url="loadgriddata_get.php" title="请输入查询条件" 
rownumbers="true" toolbar="#searchtool" loadMsg="正在查询..."> 
<thead> 
<tr> 
<th field="PersonCode" Width="80">工号</th> 
<th field="MyName" width="80">姓名</th> 
<th field="KQDate" width="100">考勤日期</th> 
<th field="MyWeek" width="80">星期</th> 
<th field="KQMemo" width="200">打卡时间</th> 
</tr> 
</thead> 
</table> <div id="searchtool" style="padding:5px"> 
<span>工号:</span><input type="text" id="PersonCode" value="" size=10 /> 
<span>考勤年月:</span><input type="text" id="KQYM" value="" size=10 /> 
  <a href="javascript:FindData()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> 
<div> 
</body> 
</html>

以下是取数据集,并将数据组装成json对象返回给前台的php代码
<?php 
include_once("auth.php"); 
include_once("inc/ms_conn.php"); 
include_once("inc/comm_function.php"); 
$PersonCode=$_POST["PersonCode"]; //前端传来的参数 
$KQYM=$_POST["KQYM"]; 
$sqlstr="Exec dbo.HR_Prg_GetPersonYMKQ2 '$KQYM','$PersonCode'"; 
$rs =mssqlquery($sqlstr); //自定义的mssql方法,类拟mssql_query方法 
$row = mssql_num_rows($rs); //取行总行数 
$result["total"] = $row; 
$items =array(); 
while ($row = mssql_fetch_array($rs)){ 
foreach($row as $key=>$value){ 
//这里很重要,php的json_encode只支持utf-8,否则含汉字字段值会被置为null 
 $row[$key]=iconv('gb2312','UTF-8',$row[$key]); } 
 array_push($items, $row); } 
 $result["rows"] =$items; 
 echo json_encode($result); 
?>

以下为效果图
jQuery easyui datagrid动态查询数据实例讲解
Javascript 相关文章推荐
浅谈javascript 面向对象编程
Oct 28 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 #Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 #Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 #Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 #Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 #Javascript
js 获取计算后的样式写法及注意事项
Feb 25 #Javascript
js调用webservice中的方法实现思路及代码
Feb 25 #Javascript
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
python django集成cas验证系统
2014/07/14 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python关闭占用端口方式
2019/12/17 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
速比涛英国官网:Speedo英国
2019/07/15 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
拓展培训心得体会
2014/01/04 职场文书
高一历史教学反思
2014/01/13 职场文书
扬州个园导游词
2015/02/06 职场文书
教导处教学工作总结
2015/08/12 职场文书
初中班主任心得体会
2016/01/07 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
MySQL数据库 安全管理
2022/05/06 MySQL