![]() |
#2
marer2008-03-06 15:37
建议使用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} |
本人刚学JAVA不久,想请教一个问题,我做了一个JSP页面,页面上有表格,现在要实现某一功能,有一个增加一行和一个保存按钮,增加的时候能够生成一行和上面表格一样的一行表格,且可以保存,可以删除,但是呢,业务逻辑只能写在页面,不能写在后台,急求,谢谢了!!!!!