jquery easyui dataGrid 跟struts2结合使用小例子 _Web前端

jquery easyui dataGrid 和struts2结合使用小例子

很高兴又步入到jquery easyui的学习中，说实话我喜欢web开发......

java代码：

?Student类:

public class Student {
?private String id;
?private String name;
?private String className;
?public String getId() {
??return id;
?}
?public String getName() {
??return name;
?}
?public String getClassName() {
??return className;
?}
?public void setId(String id) {
??this.id = id;
?}
?public void setName(String name) {
??this.name = name;
?}
?public void setClassName(String className) {
??this.className = className;
?}
?
}

?Action代码:

?EasyuiAction类:

package org.easyui;

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

import com.opensymphony.xwork2.ActionSupport;

public class EasyuiAction extends ActionSupport{
?private static final long serialVersionUID = 1L;
?private static int Num = 10;
?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;
?}
?@Override
?public String execute() throws Exception {
??this.total = 100;
??this.rows = new ArrayList<Object>();
??for(int i=0;i<Num;i++){
???Student?student = new Student();
???student.setId("id_"+i);
???student.setName("name_"+i);
???student.setClassName("className_"+i);
???
???Map<String,Object> map = new HashMap<String,Object>();
???map.put("id", student.getId());
???map.put("name", student.getName());
???map.put("className",student.getClassName());
???
???this.rows.add(map);
??}
??return SUCCESS;
?}
?
}

stur

struts.xml文件的配置如下：

?<package name="jsonDemo" extends="json-default">
???<action name="easyAction" class="org.easyui.EasyuiAction">
????<result type="json"/>
???</action>
??</package>

easyDemo.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>easyDemo.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,
????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:'140',rowspan:2,align:'center'},
?????{title:'姓名',field:'name',width:'150',rowspan:2,align:'center'},
?????{title:'班级',field:'className',width:'150',rowspan:2,align:'center'}
????]],
????pagination:true,
????rownumbers:true
????
???});
???$('#tt').datagrid('getPager').pagination({displayMsg:'当前显示从{from}到{to}共{total}记录'});
??});
??
?</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代码如下:用ajax做测试json格式的数据.

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","true");
??? xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
??? xmlhttp.send(null);
}
function callback(){
??? if(xmlhttp.readyState == 4){
??????? if(xmlhttp.status == 200){
??????? ? var oBook = eval('(' + xmlhttp.responseText + ')');//普通的字符串转变成具体的对象的时候
??????? ?// alert(xmlhttp.responseText);
??????? ? $.messager.alert('test jsonData',xmlhttp.responseText);
?????????? /*? var bookHolder = document.getElementById('bookHolder');
???????????? var sBook = '<p><b>ISBN: </b>' + oBook.ISBN + '</p>';
???????????? sBook += ('<p><b>Title: </b>' + oBook.title + '</p>');
???????????? sBook += ('<p><b>Price: </b>$' + oBook.price + '</p>');
???????????? sBook += ('<p><b>date: </b>' + oBook.date + '</p>');
???????????? sBook += ('<b><i>Comments: </i></b><hr/>');
???????????? for(i = 0; i < oBook.comments.length; i++) {
???????????????? sBook += ('<p><b>#' + (i + 1) + ' </b>' + oBook.comments[i] + '</p>');
???????????? }
???????????? bookHolder.innerHTML = sBook;
???????????? * */
??????? }
?? }
}

效果如下: