`
谷超
  • 浏览: 166305 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery easyui datagrid

 
阅读更多

 在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/

 

  • 大小: 26.7 KB
  • 大小: 24.2 KB
分享到:
评论

相关推荐

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    jquery easyui datagrid性能优化

    jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。

    JqueryEasyUI DataGrid例子

    综上所述,这个 JqueryEasyUI DataGrid 示例展示了如何使用前端框架与后端服务器配合,实现一个功能完备的表格应用。在实际开发中,开发者可以根据需求调整 DataGrid 的配置项,以及后台 Servlet 的逻辑,以适应各种...

    jquery easyui datagrid 教程

    jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...

    jquery easyui datagrid demo 详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列丰富的组件,使得开发者可以轻松构建用户界面,而 Datagrid 是其中非常重要的一个组件,常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

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

    jQuery EasyUI datagrid是一个基于jQuery和EasyUI的UI组件库,提供了丰富的界面组件,其中的datagrid组件用于创建数据表格。 传统的分页方法通常是由后端服务器完成,即将全部数据检索出来后,由服务器端根据分页...

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

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

    jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...

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

    主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    EasyUI是一个基于jQuery的用户界面插件集合,它简化了Web应用的前端开发工作,使得开发者能够更加专注于业务逻辑的实现而非UI的构建。其中,dataGrid是EasyUI中一个非常重要的组件,用于展示表格数据,支持排序、...

    jquery EasyUI DataGrid

    jquery EasyUI DataGrid 实现批量删除和批量添加和批量更新,减少服务器交互

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

    在jQuery EasyUI中,datagrid是一个常用的组件,用于展示表格数据并提供各种操作功能。在实际应用中,我们可能需要在用户翻页后仍然保持选择的行的状态,即记录被选中的行。这个问题可以通过监听datagrid的事件和...

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

    本文详细讲解了如何使用jQuery easyui datagrid组件进行动态查询数据的过程。具体来说,文章将从前端界面接受查询条件,通过后端PHP代码与MSSQL数据库交互,并返回JSON格式的数据展示在easyui datagrid中。这个过程...

    jquery easyui datagrid列传参

    该列设为超链接,点击时向调用的js方法传参。 return "(parameter)/&gt;这里onclick的参数是怎么传的呢

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

    jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...

    easyui的datagrid生成合并行,合计计算价格

    在IT行业中,EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了一系列的UI组件,用于构建用户界面。在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现...

Global site tag (gtag.js) - Google Analytics