我这边有个基于ssh+jquery-easyUI实现的例子,由于文件太大不能上传,先传两张图片上来,大家看一下,有需要源码的话,请留邮箱,我会尽快给你发过去的,大家互相学习!!!
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
<script>
$(function(){
var lastIndex;
$('#tt').datagrid({
title:"添加用户",
height : '400',
width : 'auto',
singleSelect: true,
rownumbers: true,
remoteSort: false,
pagination:true,
url:'findAll!findAll.action',
toolbar:[{
text:'append',
iconCls:'icon-add',//添加用户
handler:function(){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('appendRow',{
id:'',
userName:'',
addr:'',
date:'',
age:'',
password:''
});
lastIndex = $('#tt').datagrid('getRows').length-1;
$('#tt').datagrid('selectRow', lastIndex);
$('#tt').datagrid('beginEdit', lastIndex);
}
},'-',{
text:'delete',
iconCls:'icon-remove',
handler:function(){
var row = $('#tt').datagrid('getSelected');
if (row){
$.ajax({
url:"delUser!delUser.action",
type:"post",
data:{"user.id":row.id}
});
var index = $('#tt').datagrid('getRowIndex', row);
$('#tt').datagrid('deleteRow', index);
}
}
},'-',{
text:'accept',
iconCls:'icon-save',
handler:function(){
$('#tt').datagrid('acceptChanges');
var row = $('#tt').datagrid('getSelected');//获取选中的行
$.ajax({//向后台传送数据
url:"saveUser!saveUser.action",
type:"post",
data:{
"user.userName":row.userName,//需要传送到后台的数据
"user.addr":row.addr,
"user.age":row.age,
"user.date":row.date,
"user.password":row.password
}
});
}
},'-',{
text:'reject',
iconCls:'icon-undo',
handler:function(){
$('#tt').datagrid('rejectChanges');
}
},'-',{
text:'GetChanges',
iconCls:'icon-search',
handler:function(){
var rows = $('#tt').datagrid('getChanges');
alert('changed rows: ' + rows.length + ' lines');
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges');
},
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
}
});
});
</script>
</head>
<body>
<h2>Editable DataGrid</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"></div>
<div>Click the row to start editing.</div>
</div>
<table id="tt" style="width:700px;height:auto"
data-options="iconCls:'icon-edit',singleSelect:true,idField:'itemid',url:'datagrid_data2.json'"
title="Editable DataGrid">
<thead>
<tr>
<th data-options="field:'id',width:80">ID</th>
<th data-options="field:'userName',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}},editor:'text'">userName</th>
<th data-options="field:'addr',width:80,align:'right',editor:'text'">address</th>
<th data-options="field:'date',width:250,editor:'text'">date</th>
<th data-options="field:'age',width:250,editor:'text'">Age</th>
<th data-options="field:'password',width:250,editor:'text'">password</th>
</tr>
</thead>
</table>
</body>
</html>