在easyui官方网站http://www.jeasyui.com/下载jquery-easyui项目
前阶段使用了easyui datagrid进行了表格显示,个人觉得easyui datagrid的使用和上一篇文章介绍的JQuery paganition的使用大同小异,后端接收前台传递过来的参数信息,比如分页信息(查询的页码数,每页显示的记录数),排序信息(排序的字段,排序顺序)等,后端进行查询后,通常以XML或JSON格式进行返回,返回之后把查询得到的数据显示到页面上。
下面是一个使用easyui datagrid的简单例子,能够进行分页和排序。
实体类User
package com.guchao.datagrid.entity; import java.util.Date; public class User { private int id; private String username; private int age; private Date birthday; public User(){} public User(int id, String username, int age, Date birthday) { this.id = id; this.username = username; this.age = age; this.birthday = birthday; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public Date getBirthday() { return birthday; } public void setBirthday(Date birthday) { this.birthday = birthday; } }
请求的Servlet
package com.guchao.datagrid.servlet; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Date; import java.util.LinkedList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; import org.apache.commons.lang.StringUtils; import com.guchao.datagrid.entity.Message; import com.guchao.datagrid.entity.User; import com.guchao.datagrid.util.JsonDateValueProcessor; public class TestEasyUiDatagridServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 2359671680273517448L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //页码数 String pageNum = req.getParameter("page"); int pageNo = 0; if(pageNum != null && !pageNum.trim().equals("")){ pageNo =Integer.parseInt(pageNum); } //每页显示记录数 String pageSize = req.getParameter("rows"); int size = 0; if(pageSize != null && !pageSize.trim().equals("")){ size =Integer.parseInt(pageSize); } String sortName = req.getParameter("sort");//排序字段 String sortOrder = req.getParameter("order");//排序的顺序 System.out.println("sortName="+sortName+",sortOrder="+sortOrder+",page="+pageNo+",row="+size); Connection con = null; Statement stmt = null; ResultSet rs = null; int count = 0; List<Object> data = new LinkedList<Object>(); try { Class.forName("com.mysql.jdbc.Driver").newInstance(); con = DriverManager.getConnection("jdbc:mysql://localhost:3306/myhibernate", "root", "mysql"); String countSql = "select count(*) from t_user"; stmt = con.createStatement(); rs = stmt.executeQuery(countSql); if(rs.next()){ count = rs.getInt(1); } String sql = "select id,username,age,birthday from t_user "; if(StringUtils.isNotBlank(sortName) && StringUtils.isNotBlank(sortOrder)){ sql += " order by "+sortName+" "+sortOrder; } sql += " limit "+(pageNo-1)*size+","+size; System.out.println(sql); rs = stmt.executeQuery(sql); while(rs.next()){ User u = new User(rs.getInt("id"),rs.getString("username"),rs.getInt("age"),rs.getDate("birthday")); data.add(u); System.out.println(rs.getInt("id")+","+rs.getString("username")+","+rs.getInt("age")+","+rs.getDate("birthday")); } } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } catch (InstantiationException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } finally{ try { rs.close(); stmt.close(); con.close(); } catch (SQLException e) { e.printStackTrace(); } } Message m = new Message(); m.setTotal(count); m.setRows(data); JsonConfig config = new JsonConfig(); config.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor("yyyy-MM-dd")); JSONObject jsonObject = JSONObject.fromObject(m, config); System.out.println(jsonObject.toString()); resp.getWriter().write(jsonObject.toString()); } }
返回的JSON类
package com.guchao.datagrid.entity; import java.util.List; public class Message { private int total; private List<Object> rows; public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public List<Object> getRows() { return rows; } public void setRows(List<Object> rows) { this.rows = rows; } }
日期类型的处理类
package com.guchao.datagrid.util; import java.text.SimpleDateFormat; import net.sf.json.JsonConfig; import net.sf.json.processors.JsonValueProcessor; public class JsonDateValueProcessor implements JsonValueProcessor { public static final String Default_DATE_PATTERN = "yyyy-MM-dd"; private SimpleDateFormat dateFormat; public JsonDateValueProcessor(String datePattern){ try { dateFormat = new SimpleDateFormat(datePattern); } catch (Exception e) { dateFormat = new SimpleDateFormat(Default_DATE_PATTERN); } } public Object processArrayValue(Object value, JsonConfig jsonConfig) { return process(value); } public Object processObjectValue(String key, Object value, JsonConfig jsonConfig) { return process(value); } private Object process(Object value) { if (value == null) { return ""; } else { return dateFormat.format(value); } } }
JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link rel="stylesheet" href="jquery-easyui-1.3.2/themes/default/easyui.css"> <link rel="stylesheet" href="jquery-easyui-1.3.2/themes/icon.css"> <link rel="stylesheet" href="jquery-easyui-1.3.2/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script> </head> <body> <h2>Basic DataGrid</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>The DataGrid is created from markup, no JavaScript code needed.</div> </div> <div style="margin:10px 0;"></div> <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:'testEasyUiDatagrid.do'" pagination="true"> <thead> <tr> <th data-options="field:'id',width:80,sortable:true">id</th> <th data-options="field:'username',width:100,sortable:true">username</th> <th data-options="field:'age',width:80,align:'right'">age</th> <th data-options="field:'birthday',width:80,align:'right'">birthday</th> </tr> </thead> </table> </body> </html>
web.xml
<servlet> <servlet-name>TestEasyUiDatagrid</servlet-name> <servlet-class>com.guchao.datagrid.servlet.TestEasyUiDatagridServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestEasyUiDatagrid</servlet-name> <url-pattern>/testEasyUiDatagrid.do</url-pattern> </servlet-mapping>
页面的效果图和项目结构图参见附件!更多信息请参考easyui官方网站http://www.jeasyui.com/
相关推荐
这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
综上所述,这个 JqueryEasyUI DataGrid 示例展示了如何使用前端框架与后端服务器配合,实现一个功能完备的表格应用。在实际开发中,开发者可以根据需求调整 DataGrid 的配置项,以及后台 Servlet 的逻辑,以适应各种...
jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列丰富的组件,使得开发者可以轻松构建用户界面,而 Datagrid 是其中非常重要的一个组件,常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...
jQuery EasyUI datagrid是一个基于jQuery和EasyUI的UI组件库,提供了丰富的界面组件,其中的datagrid组件用于创建数据表格。 传统的分页方法通常是由后端服务器完成,即将全部数据检索出来后,由服务器端根据分页...
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...
主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
EasyUI是一个基于jQuery的用户界面插件集合,它简化了Web应用的前端开发工作,使得开发者能够更加专注于业务逻辑的实现而非UI的构建。其中,dataGrid是EasyUI中一个非常重要的组件,用于展示表格数据,支持排序、...
jquery EasyUI DataGrid 实现批量删除和批量添加和批量更新,减少服务器交互
在jQuery EasyUI中,datagrid是一个常用的组件,用于展示表格数据并提供各种操作功能。在实际应用中,我们可能需要在用户翻页后仍然保持选择的行的状态,即记录被选中的行。这个问题可以通过监听datagrid的事件和...
本文详细讲解了如何使用jQuery easyui datagrid组件进行动态查询数据的过程。具体来说,文章将从前端界面接受查询条件,通过后端PHP代码与MSSQL数据库交互,并返回JSON格式的数据展示在easyui datagrid中。这个过程...
该列设为超链接,点击时向调用的js方法传参。 return "(parameter)/>这里onclick的参数是怎么传的呢
jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...
在IT行业中,EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了一系列的UI组件,用于构建用户界面。在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现...