`

jquery easyui DataGrid分页操作

jQueryStrutsDAOJavaScriptCSS 
阅读更多

上午没事抽空做了一个datagrid的入门例子，是结合struts2做的，刚下班了，也闲着没事，就datagrid的再做进一步的开发；进行分页操作另外本人有一个习惯，拒绝转载或者抄袭他人的东西.此外，事例源码尽量完整，哪怕最简单的代码也要写的清楚. 

 先看效果：

虽然说是入门的例子，但本人尽量做的详细点，以后会继续更新，部分功能

此外，为了后继easyui的学习，做了一个简单的框架：后台采用hibernate2.5+struts2开发：数据库用mysql。红色代码标记注意。

 

model层的数据

   Student类

package org.easyui.model;

import java.util.Date;

public class Student {
 private int id;
 private int age;
 private String name;
 private Date birthday;
 private String className;
 private char sex;
 
 public char getSex() {
  return sex;
 }
 public void setSex(char sex) {
  this.sex = sex;
 }
 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;
 }
 public int getId() {
  return id;
 }
 public void setId(int id) {
  this.id = id;
 }
 public String getName() {
  return name;
 }
 public String getClassName() {
  return className;
 }
 public void setName(String name) {
  this.name = name;
 }
 public void setClassName(String className) {
  this.className = className;
 }
 
}

 

 

 

easyDemo1.jsp页面代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>easyDemo1.jsp</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
 <script type="text/javascript" src="jquery-easyui/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
 
    <script type="text/javascript" src="jslib/easyDemo.js"></script>
 <script type="text/javascript">
  $(function(){
   $('#tt').datagrid({
    title:'datagrid小例子',
    iconCls:'icon-ok',
    width:500,
    height:320,
    pageSize:5,
    pageList:[5,10,15,20],
    nowrap:false,
    striped: true,
    collapsible:true,
    url:'easyAction.action',
    loadMsg:'数据装载中......',
    sortName:'code',
    sortOrder:'desc',
    remoteSort:false,
    frozenColumns:[[
     {field:'ck',checkbox:true}
    ]],
    columns:[[
     {title:'学号',field:'id',width:'50',rowspan:2,align:'center'},
     {title:'姓名',field:'name',width:'60',rowspan:2,align:'center'},
     {title:'性别',field:'sex',width:'50',rowspan:2,align:'center'},
     {title:'年龄',field:'age',width:'50',rowspan:2,align:'center'},
     {title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'},
     {title:'班级',field:'className',width:'100',rowspan:2,align:'center'}
    ]],
    pagination:true,
    rownumbers:true
    
   });
   $('#tt').datagrid('getPager').pagination({
    displayMsg:'当前显示从{from}到{to}共{total}记录',
    onBeforeRefresh:function(pageNumber, pageSize){
     $(this).pagination('loading');
     alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
     $(this).pagination('loaded');
    },
   });
   
   //$('#tt').datagrid({url:'easyAction.action'});
  });
 </script>
  </head>
 
  <body>
    <a href="javascript:void(0)" onclick="verify()" class="easyui-linkbutton">测试josn数据</a>
    <h2><b>测试easyui的DataGrid</b></h2>
    <table id="tt">
    </table>
  </body>
</html>

 

 

 easyDemo.js代码如下:

var xmlhttp;
function verify(){
    //创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject){
      var activerxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i<activerxName.length;i++){
            try{
                 xmlhttp = new ActiveXObject(activerxName[i]);
              break;
            }catch(e){
            }
        }
    }
    //确认XMLHttpRequest对象是否创建成功
    if(!xmlhttp){
        alert("XMLHttpRequest对象创建失败");
        return;
    }else{
    }
    xmlhttp.onreadystatechange = callback;
    xmlhttp.open("POST","easyAction.action?page=1&rows=5","true");
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.send();
}
function callback(){
    if(xmlhttp.readyState == 4){
        if(xmlhttp.status == 200){
          var oBook = eval('(' + xmlhttp.responseText + ')');
         $.messager.alert('test jsonData',xmlhttp.responseText);
        }
   }
}

 

 

 如有不懂的，可以留言或者加我q：620734263.喜欢和大家分享与学习!!!

工作区截图;

http://hi.baidu.com/620734263/blog/item/ded3a4511db3427084352414.html

 

 

 DAO数据库访问层

  接口EasyDao：

package org.easyui.dao;

import java.util.List;

import org.easyui.model.Student;

public interface EasyDao {
 public List<Student> getStudent(int page,int rows);
 public int getTotalPages(int rows);
}

接口实现类EasyDaoImpl：

package org.easyui.dao;

import java.util.List;

import org.easyui.model.Student;
import org.easyui.util.UtilHibernate;
import org.hibernate.HibernateException;
import org.hibernate.Session;

public class EasyDaoImpl implements EasyDao {

 @SuppressWarnings("unchecked")
 public List<Student> getStudent(int page, int rows) {
  List<Student> list = null;
  Session session = UtilHibernate.getSession();
  try {
   session.beginTransaction();
   String sql = "from Student";
   list = session.createQuery(sql)
        .setFirstResult((page-1)*rows)
        .setMaxResults(rows)
        .list();
   session.getTransaction().commit();
  } catch (HibernateException e) {
   session.getTransaction().rollback();
   e.printStackTrace();
  }finally{
   UtilHibernate.closeSession(session);
  }
  
  return list;
 }

 public int getTotalPages() {
  Session session = UtilHibernate.getSession();
  int total = 0;
  try {
   session.beginTransaction();
   String sql = "select count(*) from Student";
   int count = (Integer)session.createQuery(sql).uniqueResult();
   total =count;
   session.getTransaction().commit();
  } catch (HibernateException e) {
   session.getTransaction().rollback();
   e.printStackTrace();
  }finally{
   UtilHibernate.closeSession(session);
  }
  return total;
 }

}

 

 Action层:

 EasyuiAction1 代码如下

package org.easyui;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.easyui.dao.EasyDao;
import org.easyui.dao.EasyDaoImpl;
import org.easyui.model.Student;

import com.opensymphony.xwork2.ActionSupport;

public class EasyuiAction1 extends ActionSupport implements ServletRequestAware{
 private static final long serialVersionUID = 1L;
 private  HttpServletRequest request;
 private int total;
 private List<Object> rows;
 
 public int getTotal() {
  return total;
 }
 public List<Object> getRows() {
  return rows;
 }
 public void setTotal(int total) {
  this.total = total;
 }
 public void setRows(List<Object> rows) {
  this.rows = rows;
 }
 
 @Override
 public String execute() throws Exception {
  int page =Integer.parseInt(request.getParameter("page"));
  int row = Integer.parseInt(request.getParameter("rows"));//接受参数page和rows
  EasyDao dao = new EasyDaoImpl();   //实例化dao
  this.total = dao.getTotalPages();

  this.rows = new ArrayList<Object>();
  List<Student> list = dao.getStudent(page, row);//分页，将数据保存到list中
  
  for(int i=0;i<list.size();i++){
   Student student  = list.get(i);    //最原始循环方法到到student对象
   Map<String,Object> map = new HashMap<String,Object>();
   map.put("id", student.getId());        //以键值对的形式保存到map中
   map.put("sex", student.getSex());
   map.put("name",student.getName());
   map.put("age", student.getAge());
   map.put("birthday", student.getBirthday());
   map.put("className", student.getClassName());     
   this.rows.add(map);       //循环保存map到list对象this.rows中
  }
  System.out.println(request.getParameter("page"));
  System.out.println(request.getParameter("rows"));
  return SUCCESS;
 }
 public void setServletRequest(HttpServletRequest request) {
  this.request = request;
 }
}

 

 

struts.xml配置如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
 <package name="jsonDemo" extends="json-default">
   <action name="easyAction" class="org.easyui.EasyuiAction1">
    <result type="json"/>
   </action>
  </package>
</struts>   

 

 

 

分享到：
| proxool配置文档（一）
评论
1 楼 ayxiaogang 2012-08-12  
图片看不到啊亲 。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery easyui datagrid demo

    Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件，常用于表格数据的展示和操作，支持分页、排序、过滤、编辑等功能。通过阅读这份文档，我们可以了解 Datagrid 的基本配置和高级特性，以及如何与后端数据源进行...

    easyui datagrid 分页查询样例

    EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的功能，如表格布局、数据分页、排序、过滤等，常用于Web应用的数据展示。在本项目中，"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...

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

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

    easyui datagrid 数据导出到Excel

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

    JqueryEasyUI DataGrid例子

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

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

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...

    jquery easyui datagrid 教程

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

    jquery easyui datagrid demo 详解

    本篇文章将详细解析 jQuery EasyUI Datagrid 的使用，包括增、删、改、查的基本操作。 首先，Datagrid 是一个表格控件，它可以用来显示大量的结构化数据，并支持分页、排序、过滤等功能。在创建 Datagrid 时，我们...

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...

    easyui datagrid 表格 打印

    在IT领域，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时，可能会遇到一些挑战，因为通常默认的浏览器打印功能...

    easyui datagrid 增加鼠标悬停弹窗事件

    EasyUI的Datagrid是一个强大的表格组件，它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中，Datagrid常用于展示结构化的数据，使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**： 在...

    EasyUI中datagrid 分页，僧删改查，上下移动数据.net案例

    本文将深入探讨标题中的"EasyUI中datagrid分页，增删改查，上下移动数据"的.NET案例。 **EasyUI的datagrid组件**： EasyUI的datagrid是一个表格控件，它具有数据展示、排序、过滤、分页等功能，非常适合用于数据...

    jquery自制分页，控制easyui datagrid分页，集中处理了一下前后台

    本教程将围绕“jQuery 自制分页，控制 EasyUI datagrid 分页”这一主题进行深入讲解。 首先，EasyUI 的 DataGrid 默认的分页功能已经相当强大，它可以自动处理数据请求、显示页码和每页条数等。然而，在某些情况下...

    基于JQuery的datagrid分页数据实现

    本项目"基于JQuery的datagrid分页数据实现"就是针对这一需求提供的一种解决方案。这个小程序利用SSH2（Struts2、Spring、Hibernate）框架，结合Maven构建工具，实现了通过jQuery的datagrid插件进行Ajax分页加载数据...

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

    通过对EasyUI dataGrid组件的深入理解和实践操作，我们可以有效地解决在列较多且无数据时列显示不全的问题。这种方法不仅提高了表格的可用性，还增强了用户体验。当然，实际应用中还需要根据具体情况进行调整优化。

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

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

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

    EasyUI的DataGrid是一种强大的数据展示工具，它可以用来展示结构化的数据，并提供了分页、排序、过滤等多种功能。DataGrid的使用非常方便，只需要简单的HTML和JavaScript代码就能创建出具有复杂功能的表格。 2. 行...

Magicbox
Global site tag (gtag.js) - Google Analytics