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、pageNumHttpServletResponse 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/

easyui的简单实例相关推荐

java查询mysql装载bean_jsp与javabean链接mysql数据库并查询数据表的简单实例源码
jsp与javabean链接mysql数据库并查询数据表的简单实例源码.这个简单的实例是给新手学习的,或者一些高手临时忘记怎么使用jsp操作mysql数据库时候查找的,包括了建立mysql数据库连接的 ...
js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称
1,列举对象属性的名称 <script language="javascript"> var obj=new Object(); obj.a="您好,我是田洪 ...
关于webservice的异步调用简单实例
于webservice的异步调用简单实例无论在任何情况下,被调用方的代码无论是被异步调用还是同步调用的情况下,被调用方的代码都是一样的, 下面,我们就以异步调用一个webservice 为例作说明. ...
（三）AJAX基本介绍和简单实例03
(三)AJAX基本介绍和简单实例03-----Ajax与数据库的动态应用前台显示界面: 选择所有客户之后: 选择其中一个客户---杜森: Demo03.html代码 <html> < ...
protobuf和socket通信简单实例
protobuf和socket通信简单实例 protobuf是 Google 公司内部的混合语言数据标准,可以用来定义通信的协议,由于其有序列化和反序列化的操作,减小了存储或通信的数据量,从而达到 ...
转载 jsonrpc环境搭建和简单实例
jsonrpc环境搭建和简单实例一.环境准备下载需要的jar包和js文件,下载地址:https://yunpan.cn/cxvbm9DhK9tDq 访问密码 6a50 二.新建一个web工程,j ...
spring之AOP的简单实例
AOP:面向切面编程,就是把除去业务部分以外的东西单独模块化,比如打日志等,就像学生信息的增删改查,可以把输出日志单独模块化出来,通过切面对的方式进行编程. 在进行实例编写之前先进行一些专业术语的了解 ...
Hibernate搭建开发环境+简单实例（二）
2019独角兽企业重金招聘Python工程师标准>>> Hibernate是非常典型的持久层框架,持久化的思想是非常值得我们学习和研究的.这篇博文,我们主要以实例的形式学习Hiber ...
WPF MvvmLight简单实例(1) 页面导航
原文:WPF MvvmLight简单实例(1) 页面导航实现了那些功能,先看看截图: 操作描述: 在程序运行后,点击"Load"按钮,页面会加载PageOne,点击PageOne ...

easyui的简单实例

easyui的简单实例相关推荐

最新文章

热门文章