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 文本滚动效果的实例代码
Aug 17 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
Openlayers实现地图的基本操作
Sep 28 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中截取字符串支持utf-8
2007/01/18 PHP
php 一元分词算法
2009/11/30 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
jQuery技巧总结
2011/01/01 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
六个窍门助你提高Python运行效率
2015/06/09 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
通过cmd进入python的步骤
2020/06/16 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
人力资源部培训专员岗位职责
2014/01/02 职场文书
幼儿教师研修感言
2014/02/12 职场文书
yy婚礼主持词
2014/03/14 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2015年化验员工作总结
2015/04/10 职场文书
教师节主题班会方案
2015/08/17 职场文书
详解Python中的进程和线程
2021/06/23 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis