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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
Javascript实现单例模式
Jan 24 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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实现图片缩放功能类
2013/12/18 PHP
php基础教程
2015/08/26 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
原生js调用json方法总结
2018/02/22 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
JS实现小米轮播图
2020/09/21 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
python字典排序实例详解
2015/05/20 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python换行与不换行的输出实例
2020/02/19 Python
python使用Geany编辑器配置方法
2020/02/21 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
继承公证书
2014/04/09 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
python内置模块之上下文管理contextlib
2022/06/14 Python