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插件使用介绍
Mar 20 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
vue中监听返回键问题
Aug 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开发规范手册之PHP代码规范详解
2011/01/13 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python写日志封装类实例
2015/06/28 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
如何卸载python插件
2020/07/08 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
远程调用的原理
2014/07/05 面试题
2014年社区学雷锋活动总结
2014/03/09 职场文书
保密工作责任书
2014/04/16 职场文书
五一口号
2014/06/19 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书