求助
本人刚学JAVA不久,想请教一个问题,我做了一个JSP页面,页面上有表格,现在要实现某一功能,有一个增加一行和一个保存按钮,增加的时候能够生成一行和上面表格一样的一行表格,且可以保存,可以删除,但是呢,业务逻辑只能写在页面,不能写在后台,急求,谢谢了!!!!!
建议使用Ext Js，到网上看看吧，好在我今天没什么事，给你现写个例子吧：
1、index.jsp:
<%@ page language="java" contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>表格编辑示例</title>
<link href="JS/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="Css/myCss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="JS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="JS/ext-all.js"></script>
<script type="text/javascript" src="JS/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="JS/editgrid.js"></script>
</head>
<body>
<a href="#"></a>
<select id="sex" style="display:none">
<option value="0">男</option>
<option value="1">女</option>
</select>
<div id="editgrid" style="padding:10px;margin:10px"></div>
</body>
</html>
2、editgrid.js:(注意：使用utf-8编码)
Ext.onReady(function(){
Ext.QuickTips.init();
function formatSex(value){
return value==0?'男':'女'; //性别渲染方法
}
function formatDate(value){
return value?value.dateFormat('Y年m月d日'):''; //日期渲染方法
}
var sexdata=[[0,'男'],[1,'女']]; //性别集合（用于后面添加新用户）
//创建列模型
var column=new Ext.grid.ColumnModel([
{
id:'id',
header:'用户编号',
dataIndex:'userid',
width:80
},
{
id:'name',
header:'用户姓名',
dataIndex:'username',
width:150,
editor:new Ext.form.TextField({allowBlank:false,blankText:'用户姓名不能为空'}) //修改模式的文本框
},
{
header:'性别',
dataIndex:'sex',
width:80,
editor:new Ext.({triggerAction:'all',lazyRender:true,transform:'sex'}) //修改模式的下拉框
},
{
header:'生日',
dataIndex:'birth',
width:100,
editor:new Ext.form.DateField({format:'Y/m/d'}) //修改模式的日期框
}
]);
//创建记录模型
var User=new Ext.data.Record.create([
{name:'userid',type:'string'},
{name:'username',type:'string'},
{name:'sex',type:'int'},
{name:'birth',type:'date',dateFormat:'Y/m/d'}
]);
//创建记录集
var store=new Ext.data.Store({url:'DemoData',reader:new Ext.data.JsonReader({root:'data'},User),sortInfo:{field:'userid',direction:'ASC'}});
store.load(); //填充记录
//创建等待读取数据时的等待框
var mask=new Ext.LoadMask('editgrid',{msg:'数据读取中...',removeMask:true});
mask.show(); //显示
//创建可编辑的数据表格
var grid=new Ext.grid.EditorGridPanel({
store:store,
cm:column,
title:'用户管理',
width:800,
height:300,
frame:true,
autoExpandColumn:'name',
loadMask:mask,
clicksToEdit:1,
renderTo:'editgrid',
selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
tbar:[
{
text:'添加用户',
iconCls:'add',
handler:function(){
var sexstore=new Ext.data.Store({proxy:new Ext.data.MemoryProxy(sexdata),reader:new Ext.data.ArrayReader({},['value','text'])}); //得到上面的性别集合中的数据
sexstore.load();
var userid=new Ext.form.TextField({id:'userid',allowBlank:false,blankText:'用户编号不能为空',width:150,fieldLabel:'用户编号'});
var username=new Ext.form.TextField({id:'username',allowBlank:false,blankText:'用户姓名不能为空',width:150,fieldLabel:'用户姓名'});
var sex=new Ext.({id:'sex',allowBlank:false,blankText:'用户性别不能为空',triggerAction:'all',editable:false,store:sexstore,displayField:'text',valueField:'value',fieldLabel:'用户性别'});
var birth=new Ext.form.DateField({id:'birth',allowBlank:false,blankText:'出生日期不能为空',format:'Y/m/d',fieldLabel:'出生日期'});
var form=new Ext.form.FormPanel({
id:'f1',
baseCls:'x-plain',
labelWidth:40,
items:[userid,username,sex,birth]
});
var win=new Ext.Window({
title:'添加新用户',
width:300,
height:200,
minWidth:300,
minHeight:200,
layout:'fit',
plain:true,
bodyStyle:'padding:5px',
buttonAlign:'center',
items:form,
buttons:[
{
text:'保存',
handler:function(){
Ext.Ajax.request({
url:'AddUser',
params:{userid:userid.getValue(),username:username.getValue(),sex:sex.getValue(),birth:birth.getValue().dateFormat('Y/m/d')},
success:function(response,options){
var arrays=Ext.util.JSON.decode(response.responseText);
if(arrays.info.indexOf('成功')!=-1)
{
win.close();
store.load();
}
else
{
Ext.Msg.alert('提示',arrays.info);
}
}
});
}
},
{
text:'取消',
handler:function(){
win.close();
}
}
]
});
win.show(); //显示窗体
}
},
{
text:'查看所选',
iconCls:'details',
handler:function(){
var sel=grid.getSelectionModel().getSelected(); //得到被选中的行
if(sel)
{
var sex=sel.get('sex');
sex=(sex==0)?'男':'女';
var dates=sel.get('birth');
dates=dates.dateFormat('Y年m月d日');
var win=new Ext.Window({
title:'详细信息',
layout:'fit',
width:300,
height:200,
closeAction:'close',
maximizable:false,
plain:true,
autoHeight:true,
html:'<p class="x-window-body">用户编号：'+sel.get('userid')+'<br><br>用户名称：'+sel.get('username')+'<br><br>用户性别：'+sex+'<br><br>出生日期：'+dates+'</p>',
buttons:[{text:'关闭',handler:function(){
win.close();
}
}]
});
win.show(this);
}
else
{
Ext.Msg.alert('提示','请选择要查看的行');
}
}
},
{
text:'删除所选',
iconCls:'deleteSel',
handler:function(){
var sel=grid.getSelectionModel().getSelected();
if(!sel){
Ext.Msg.alert('提示','请选择要删除的行');
return;
}
Ext.Message.confirm('提示','您真的要删除所选行吗？',function(btn){
if(btn=='yes'){
Ext.Ajax.request({
url:'DelUser',
params:{userid:sel.get('userid'),selects:'one'},
success:function(response,options){
var arrays=Ext.util.JSON.decode(response.responseText);
if(arrays.info==true)
{
Ext.Msg.alert('提示','已成功删除用户');
store.remove(sel);
}
else
{
Ext.Msg.alert('提示','未知原因，未能删除用户');
}
}
});
}
}
}
},
{
text:'删除所有',
iconCls:'deleteAll',
handler:function(){
var count=grid.getStore().getCount();
if(count<=0)
{
Ext.Msg.alert('提示','没有任何数据进行删除');
return;
}
Ext.Message.confirm('提示','确认要删除全部数据吗？',function(btn){
if(btn=='yes'){
Ext.Ajax.request({
url:'DelUser',
params:{userid:'',selects:'all'},
success:function(response,optins){
var arrays=Ext.util.JSON.decode(response.responseText);
if(arrays.info==true){
Ext.Msg.alert('提示','已成功删除所有数据');
store.removeAll();
}
else{
Ext.Msg.alert('提示','未知原因，未能删除所有数据');
}
}
});
}
}
}
},
{
text:'保存修改',
iconCls:'save',
handler:function(){
grid.stopEditing(); //停止编辑
Ext.Msg.wait('保存数据','正在保存数据，请稍等...');
var records=grid.getStore().getModifiedRecords(); //得到所有已修改的行
var count=records.length;
var paras="";
if(count>0)
{
for(var i=0;i<count;i++)
{
var dates=records[i].get('birth');
dates=dates.dateFormat('Y/m/d');
paras+=records[i].get('userid')+"@"+records[i].get('username')+"@"+records[i].get('sex')+"@"+dates+",";
}
paras=paras.substring(0,paras.length-1);
Ext.Ajax.request({
url:'SaveMotify',
params:{paras:paras},
success:function(response,options){
var arrays=Ext.util.JSON.decode(response.responseText);
if(arrays.info==true)
{
Ext.Msg.alert('提示','已成功保存修改，共修改了'+arrays.count+'条记录');
grid.getStore().commitChanges();
}
else
{
Ext.Msg.alert('提示','未成功保存全部修改，共修改了'+arrays.count+'条记录');
}
}
});
}
else{
Ext.Msg.alert('提示','没有任何需要更新的数据');
}
}
}
]
});
});
3、CSS文件（myCss.css）：里面只写了工具栏中五个按钮的图片路径
.add{background-image:url(../Images/add.gif)!important}
.detail{background-image:url(../Images/detail.gif)!important}
.deleteSel{background-image:url(../Images/deleteSel.gif)!important}
.deleteAll{background-image:url(../Images/deleteAll.gif)!important}
.save{background-image:url(../Images/save.gif)!important}
