jQuery easyui datagrid动态查询数据实例讲解

 更新时间:2013年02月26日 16:02:27   作者:  
接下来将从前台提交查询条件,从MSSQL返回json数据的一个事例来讲解一下datagrid动态查询数据,感兴趣的你可不要错过了哈,希望本文可以帮助到你
该插件组小巧使用方便,以下是一个从前台提交查询条件,从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 />
&nbsp;&nbsp;<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
&nbsp;$row[$key]=iconv('gb2312','UTF-8',$row[$key]); }
&nbsp;array_push($items, $row); }
&nbsp;$result["rows"] =$items;
&nbsp;echo json_encode($result);
?>

以下为效果图

相关文章

  • jQuery基于xml格式数据实现模糊查询及分页功能的方法

    jQuery基于xml格式数据实现模糊查询及分页功能的方法

    这篇文章主要介绍了jQuery基于xml格式数据实现模糊查询及分页功能的方法,涉及jQuery使用ajax技术针对xml格式数据的读取、模糊查询及分页显示等相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • jquery模拟进度条实现方法

    jquery模拟进度条实现方法

    这篇文章主要介绍了jquery模拟进度条的方法,实例分析了jquery操作页面元素样式实现页面动态效果的方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

    jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

    下面小编就为大家分享一篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • jQuery 1.8 Release版本发布了

    jQuery 1.8 Release版本发布了

    由于在园子里还没发现这方面的文章,所以就来简单地介绍一下,本文只是简单的归纳介绍,不是完整的翻译,全文请参考原文
    2012-08-08
  • JQuery事件冒泡和默认行为代码实例

    JQuery事件冒泡和默认行为代码实例

    这篇文章主要介绍了JQuery事件冒泡和默认行为代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • jquery实现平滑的二级下拉菜单效果

    jquery实现平滑的二级下拉菜单效果

    这篇文章主要介绍了jquery实现平滑的二级下拉菜单效果,可实现鼠标滑过弹出二级下拉菜单,涉及jquery鼠标hover事件及fadeIn与fadeOut事件操作页面元素隐藏及显示的实现技巧,需要的朋友可以参考下
    2015-08-08
  • 一个简单的动态加载js和css的jquery代码

    一个简单的动态加载js和css的jquery代码

    动态加载js和css的jquery,可用于在生成页面时通过js函数加载一些共通的js和css文件,需要的朋友可以参考下
    2014-09-09
  • jQuery插件 selectToSelect使用方法

    jQuery插件 selectToSelect使用方法

    最近做一个报表页面显示位置配置的界面,刚开始时用的是多个checkbox,选择其中需要的报表即可。后来随着业务变复杂,需要使用两个select,选择其中需要的到右边select,然后提交到数据库
    2013-10-10
  • jQuery实现简单的回到顶部totop功能示例

    jQuery实现简单的回到顶部totop功能示例

    这篇文章主要介绍了jQuery实现简单的回到顶部totop功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • jQuery 1.4 15个你应该知道的新特性(译)

    jQuery 1.4 15个你应该知道的新特性(译)

    jQuery 1.4 最近刚刚发布. 这个版本可不是一个简单的改进,它不仅包含了很多新的特性,还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助.
    2010-01-01

最新评论