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 this调用规则说明
Mar 08 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
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 检查电子邮件函数(自写)
2014/01/16 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python读写unicode文件的方法
2015/07/10 Python
深入理解python多进程编程
2016/06/12 Python
Anaconda入门使用总结
2018/04/05 Python
使用python编写监听端
2018/04/12 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
精神文明单位申报材料
2014/05/02 职场文书
国庆节演讲稿
2014/05/27 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
嘉宾邀请函
2015/01/31 职场文书
运动会入场词
2015/07/18 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
openstack云计算keystone组件工作介绍
2022/04/20 Servers
apache ftpserver搭建ftp服务器
2022/05/20 Servers