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 判断页面元素是否存在的代码
Aug 14 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
js 函数调用模式小结
2011/12/26 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
现场施工员岗位职责
2014/03/10 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
双方协议书
2014/04/22 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL