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 相关文章推荐
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
javascript中this关键字详解
Dec 12 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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的FTP学习(四)
2006/10/09 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
json数据的列循环示例
2013/09/06 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
对javascript继承的理解
2016/10/11 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
优秀语文教师事迹
2014/05/18 职场文书
授权委托书公证
2014/09/14 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
民主生活会意见
2015/06/05 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python