jQuery easyui 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 />
  <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);
?>

以下为效果图

赞 (0)

相关推荐

  • easy ui datagrid 从编辑框中获取值的方法

    如下所示: var editors = $('datagrid的id').datagrid('getEditors', rowIndex); //rowIndex 行编号,从0算起 console.info(editors[0].target.val()); 以上这篇easy ui datagrid 从编辑框中获取值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JQueryEasyUI datagrid框架的基本使用

    JQueryEasyUI datagrid框架的基本使用

    今天说说这个datagrid框架的基本使用,这个框架一直以来都是大家比较头疼的框架,尤其是Json数据的拼接,后台前台都很重要,使用这个框架,最重要的是仔细:无需废话,上代码了: 复制代码 代码如下: <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><!--easyui最全的样式包也可单独引

  • EasyUI，点击开启编辑框，并且编辑框获得焦点的方法

    复制代码 代码如下: onClickRow : function(rowIndex, rowData){      var editor = $('#datagrid').datagrid('getEditor', {index:rowIndex,field:"buyNum"});      editor.target.focus();  } 点击一行,开启编辑框的同时,将光标放在编辑框中. rowIndex:是开启编辑框这行当前页的行索引,从0开始: buyNum:是开启编辑框的字段

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

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

    该插件组小巧使用方便,以下是一个从前台提交查询条件,从MSSQL返回json数据的一个事例 HTML前端代码 复制代码 代码如下: <?php include_once("auth.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel=&qu

  • jquery easyui dataGrid动态改变排序字段名的方法

    jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致: 如:实体类中的属性为userName,前台filed="userName"而数据库的字段为user_name,这个时候如果把userName设置为排序列,然后去进行点击,就会抛出异常,因为dataGrid在排序的时候会以filed="userName"中的字段名为排序字段: 问题:

  • jQuery Easyui datagrid/treegrid 清空数据

    jQuery Easyui datagrid/treegrid 清空数据

    在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义.下面给出两种方法供初学者参考: 方法一: var item = $('#filegrid').datagrid('getRows'); if (item) { for (var i = item.length - 1; i >= 0; i--) { var index = $('#filegrid').datagrid('

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap jquery.twbsPagination.js动态页码分页实例代码

    Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

  • jQuery EasyUI datagrid实现本地分页的方法

    jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

  • jQuery Easyui datagrid连续发送两次请求问题

    XXXXXX.datagrid({ url: "${pageContext.request.contextPath}/xx/xx/xx, }); 用上述方式动态加载datagrid的数据时,通过net监听,发现调用了两遍XX方法,目前的解决方案是,将url放到datagrid初始化的时候执行. $('#XXXX').datagrid({ fit: true, fitColumns: false, border: false, pagination: false, idField: 'id', s

  • jquery easyui datagrid实现增加，修改，删除方法总结

    本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: <body> <form id="form1" runat="server"> <table id="tt"> </table> </form> </body> 引用的JS: <link rel="stylesheet" t

  • jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

    jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码

    1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); S

随机推荐