EasyUI中datagrid的查询实现

在使用EasyUI的datagrid时，避免不了的需要使用其查询功能

html代码

<div style="padding:0 0 0 7px;color:#333;">
        查询管理：<input type="text" class="textbox" name="search_game_name" style="width:110px;">
        创建时间从：<input type="text" name="date_from" editable="false" class="easyui-datebox"  style="width:110px;">
        到：<input type="text" name="date_to" editable="false" class="easyui-datebox"  style="width:110px;">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="game_tool.query();">查询</a></div>

点击查询时会触发query()方法

在加载datagrid的时候，需要有queryParams

当点击查询时，query()方法会发送queryParams参数到指定的url请求数据，后台程序只需根据查询条件返回相应数据即可

查询结果展示

时间： 2024-10-11 15:24:09

EasyUI中datagrid的查询实现的相关文章

EasyUI中datagrid实现显示、增加、删除、修改、查询操作(后台代码C#)

2datagrid加载数据.代码如下所示一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script> <script src="easyui/js/jquery.easyui.min.js"></script> <link href="easyui/css/themes/d

SpringMVC+easyUI中datagrid分页实现_2014.5.1

一.概述 SpringMVC: 1.是面对方法级变量的,在操作起来会比struts方便一些(structs是类级变量),具体体现在了srpingMVC的注解上面, 如@RequstMapping("/login"),而且对于返回值ModelAndView这也是一大亮点,既可以返回一个页面(View),再加上@ResponseBody注解以后就可以返回一个模型对象(也就是一种数据结构). 2.对于方法级传入的参数操作起来也相当方便,比如本例中,在加载DataGrid时,会像后

利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

EasyUI 中 DataGrid 控件列如何绑定对象中的属性

EasyUI 中 DataGrid 控件是我们经常用到的控件之一, 但是 DataGrid 控件在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

SpringMVC+easyUI中datagrid行编辑模式（添加数据）实现_2014.5.2

一.概述根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

easyui 中Datagrid 控件在列较多且无数据时，列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"

easyUI中datagrid的使用

easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,html中主要是确定datagrid在网页中的位置,css来设置datagrid的样式,js填充datagrid数据. 一 html部分示例代码如下: <div class="columntablebox" > <table id="columnTable&qu

EasyUI中DataGrid构建复合表头

在使用easyui的DataGrid控件时,构建复合表头就显得非常简单了.只需要在使用columns属性时通过数组的方式编写列名即可.如我们需要构建成一个如下的表头: Columns的代码如下: columns: [[ { field: '_id', title: '行号', fixed: true, rowspan:2 }, { field: '_j', title: '铁路局', fixed: true, colspan:2 } ], [ { field: '_id', title: '京局

easyUI 中datagrid 返回列隐藏方法

easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', width : 50, align : 'center', formatter : returnFtt },{ field : 'agencyName', title : '市场名称', width : 50, align : 'center' },{ field : 'agencyId', titl