easyui的简单实例

以struts2为例

1.先下载easyui，下载地址：http://www.jeasyui.com/download/index.php

2.解压缩并放在项目中

3.新建jsp页面并将easyui导入jsp中

<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.3/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.3/themes/icon.css" type="text/css"/>

4.前端写好table表格

<center>
        <table id="datagrid" title="学生信息" class="easyui-datagrid" style="width:95%;height:auto;"
            url="<%=basePath%>/getStudentList.action" fitColumns="true" toolbar="#tb"
            data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:10">
            <thead>
                <tr>
                    <th field="id" width="10" align="center">学号</th>
                    <th field="name" width="10" align="center">姓名</th>
                    <th field="age" width="10" align="center">年龄</th>
                    <th field="toSchoolDate" width="10" align="center" formatter="forMatToSchoolDate">报道日期</th>
                </tr>
            </thead>
        </table>
    </center>
    <!-- 工具栏 -->
    <div id="tb" style="padding:3px;">
        <span>姓名</span>
        <input id="name" style="line-height:26px;border:1px solid #ccc">
        <span>时间</span>
        <input id="time" type="text" class="easyui-datebox" required="required">
        <a href="#" class="easyui-linkbutton" οnclick="doSerach()">查询</a><br>
        增加：<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"></a>
        删除：<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"></a>
        修改：<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"></a>
        帮助：<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'"></a>
    </div>

其中工具栏处仅展示按钮，具体实现根据业务处理

除此之外还可以通过Javascript创建Datagrid

<script type="text/javascript">
	$(function(){
		$('#datagridId').datagrid({
			url : '<%= basePath %>/getStudentList.action',
			pagination : true,
			pageList : [10,20,30,40],
			fitColumns : false,
			columns:[[
			    {field:'name',title:'姓名',width:100,align:'center',sortable:true},
			    {field:'age',title:'年龄',width:100,align:'center'},
			    {field:'sex',title:'性别',width:100,align:'center'}
			]]
		});
	})
</script>

5.struts2.xml配置文件修改

<package name="default" extends="json-default">

extends改为json-default，这个需要json-lib-2.4jar下载jar后解压缩放在lib下

6.后台处理，仅仅展示easyui的实现，具体的数据根据业务需求从数据库中获取。

StudentAction.java

package com.xu.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
import com.xu.bean.Student;

public class StudentAction extends ActionSupport{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	/**
	 * 获取学生列表信息
	 * easyUi发送ajax请求
	 * @return
	 */
	public String getStudentList(){
		HttpServletRequest request = ServletActionContext.getRequest();
		//获取每页条数
		String pageSize = request.getParameter("rows");
		int pageSizeInt = (pageSize == null || pageSize.isEmpty()) ? 1 : Integer.parseInt(pageSize);
		//获取页码
		String pageNum = request.getParameter("page");
		int pageNumInt = (pageNum == null || pageNum.isEmpty()) ? 1 : Integer.parseInt(pageNum);
		//TODO 分页时使用 pageSize、pageNum
		HttpServletResponse response = ServletActionContext.getResponse();
		//设置字符编码，解决中文乱码
		response.setCharacterEncoding("utf-8");
		List<Student> list = new ArrayList<Student>();
		Student s1 = new Student();
		s1.setId(1);
		s1.setName("刘备");
		s1.setAge(25);
		s1.setToSchoolDate(new Date());
		
		Student s2 = new Student();
		s2.setId(2);
		s2.setName("关羽");
		s2.setAge(24);
		s2.setToSchoolDate(new Date());
		Student s3 = new Student();
		s3.setId(3);
		s3.setName("张飞");
		s3.setAge(23);
		s3.setToSchoolDate(new Date());
		list.add(s1);
		list.add(s2);
		list.add(s3);
		PrintWriter out = null;
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		JSONObject json = new JSONObject();
		json.put("total", list.size());
		json.put("rows", list);
		out.write(json.toString());
		return null;
	}

}

Student.java

package com.xu.bean;

import java.util.Date;

public class Student {
	private int id;
	private String name;
	private int age;
	private Date toSchoolDate;
	public Student() {
		super();
	}
	public Student(int id, String name, int age, Date toSchoolDate) {
		super();
		this.id = id;
		this.name = name;
		this.age = age;
		this.toSchoolDate = toSchoolDate;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public Date getToSchoolDate() {
		return toSchoolDate;
	}
	public void setToSchoolDate(Date toSchoolDate) {
		this.toSchoolDate = toSchoolDate;
	}
}

需要注意的是返回的json的格式

7.效果图

具体使用详见：http://www.jeasyui.net/