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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
javascript内置对象操作详解
Feb 04 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Vue实现双向数据绑定
May 03 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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实现详细解析
2013/08/24 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
javascript实现下雨效果
2017/03/27 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python 3.8 新功能全解
2019/07/25 Python
Python 3 判断2个字典相同
2019/08/06 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
python自动化办公操作PPT的实现
2021/02/05 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
自我推荐书
2013/12/04 职场文书
商务日语专业自荐信
2014/04/17 职场文书
司法建议书范文
2014/05/13 职场文书
大班亲子运动会方案
2014/06/10 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2014年建筑工作总结
2014/11/26 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers