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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 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关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
javascript中的array数组使用技巧
2010/01/31 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
简述数据库的设计过程
2015/06/22 面试题
网络工程师自荐书范文
2014/04/01 职场文书
企业公益活动策划方案
2014/08/24 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
个人贷款收入证明
2014/10/26 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2015年除四害工作总结
2015/07/23 职场文书
公司人力资源管理制度
2015/08/05 职场文书
工程主管竞聘书
2015/09/15 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB