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 相关文章推荐
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
js添加事件的通用方法推荐
May 15 Javascript
学习vue.js条件渲染
Dec 03 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
利用webpack理解CommonJS和ES Modules的差异区别
Jun 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下intval()和(int)转换使用与区别
2008/07/18 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python可变参数函数用法实例
2015/07/07 Python
一张图带我们入门Python基础教程
2017/02/05 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python实现狄克斯特拉算法
2019/01/17 Python
python画微信表情符的实例代码
2019/10/09 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
通俗讲解python 装饰器
2020/09/07 Python
python实现马丁策略的实例详解
2021/01/15 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
表演方阵解说词
2014/02/08 职场文书
民族精神月活动总结
2014/08/28 职场文书
督导岗位职责
2015/02/04 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL