`

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

jQueryJavaScriptCSSjsonAjax 
阅读更多

很高兴又步入到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;
 }
 
}

 

ac

 

 

 

 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;
             * */
        }
   }
}

效果如下:

 


分享到：
| jquery easyui DataGrid分页操作
评论
发表评论

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

相关推荐

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