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完成代码前最好对其做5件事
Apr 07 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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桌面中心(二) 数据库写入
2007/03/11 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
Python方法的延迟加载的示例代码
2017/12/18 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
Jar包的作用是什么
2014/03/30 面试题
扩大国家免疫规划实施方案
2014/03/21 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
SQL Server实现分页方法介绍
2022/03/16 SQL Server