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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
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
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
初识php MVC
2014/09/10 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
入党自我评价范文
2014/02/02 职场文书
干部现实表现材料
2014/02/13 职场文书
工程售后服务方案
2014/06/08 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android