很高兴又步入到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++){
Studentstudent = 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;
}
}
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 demo 网页下载下来打包了,还有datagrid简要说明
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
jqueryEasyUI中的dataGrid实现的表格的增删改查,后台使用servlet,有数据库源码
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
jquery easyui datagrid demo 详解 增删改查
jquery easyui datagrid 教程的部分应用。
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
JS EasyUI DataGrid动态加载数据
easyUI datagrid 自动调整行号大小
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
EasyUI DataGrid过滤用法实例
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
使用Struts2和jQuery EasyUI实现简单CRUD系统
datagrid添加tooltip及超出宽度添加省略号
主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
jQuery EasyUI与Struts2 的整合—属性驱动篇 如果你是用模型驱动,或者是直接把属性写在action里面,你不会碰到我遇到的那么多问题。 但是你用模型驱动好吗,如果一个页面需要处理多个对象的时候怎么办。 如果你...