- 浏览: 140597 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
zhunengfei:
博主你好, 假如我知道 农历 是 6 16(数据库中存的是这个 ...
java,阳历转阴历(农历) -
awayfreeter:
lz口中的主力浏览器仅包括IE6吧。测试过几个浏览器啊。。。。 ...
DIV+CSS三行三列布局,中间自适应,完美支持主流浏览器 -
caiye1985:
看上去比较简陋,是纯html的表单设计器还是基于某些js框架的 ...
得空写的基于web的工作流表单设计器,大家看看怎么样 -
szwangdf:
能给分享一下源码么?我想参考下么,万分感谢啊 szwangd ...
得空写的基于web的工作流表单设计器,大家看看怎么样 -
abc3720:
能 给份 源码 参考下 么 lz 感激啊 3720 ...
得空写的基于web的工作流表单设计器,大家看看怎么样
学习Ext有三天了, 参考《Ext2.0入门与精通》和官方的examples照猫画虎搞了个 员工管理'系统' 和 员工签到'系统'
希望大家一起学习, 由于学艺不精, 若有不足之处还请各位批评指正, 谢谢大家
/* * MemberManage.js * @author zuoming99 */ Ext.onReady(function(){ Ext.QuickTips.init(); var fm = Ext.form; var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn}); var cm = new Ext.grid.ColumnModel([ sm,{ header:'ID', dataIndex:'id', width:40 },{ header: "姓名", dataIndex: 'name', editor: new fm.TextField({ allowBlank: false }) },{ header:'性别', dataIndex:'sex', width:60, align:'center', renderer:function(v){ return '<img src="images/'+v+'.png"/>'+(v=='m'?'男':'女'); }, editor:new fm.ComboBox({ typeAhead: true, triggerAction: 'all', transform:'sexSelect', lazyRender:true, readOnly:true, listClass: 'x-combo-list-small' }) },{ header:'年龄', dataIndex:'age', width:50, align:'right', renderer:function(v){ var code = '<span style="color:'; if(v<=25){ code += '#008000'; }else if(v>25 && v<=30){ code += '#CC6600'; }else if(v>30){ code += '#804000'; } return code+';">'+v+'</span>'; }, editor: new fm.NumberField({ allowBlank:false, allowNegative: false, allowDecimals: false, maxValue:60, minValue:18 }) },{ header: "生日", dataIndex: 'birth', renderer: function(v){ return v ? v.dateFormat('Y年m月d日') : ''; }, editor: new fm.DateField({ format: 'Y-m-d', minValue: '1800-01-01', readOnly:true, disabledDays: [0, 6], disabledDaysText: '请不要选择周末' }) } ]); cm.defaultSortable = true; var Member = Ext.data.Record.create([ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, {name: 'sex'}, {name: 'age',type:'int'}, {name: 'birth', type: 'date', dateFormat: 'Y-m-d'} ]); var store = new Ext.data.JsonStore({ url:'./member_manage.jsp', baseParams:{command:'query'}, totalProperty:'count', root:'members', fields:Member, pruneModifiedRecords:true, sortInfo: {field: "id", direction: "ASC"} //设置默认排序规则, EditorGridPanel在新增加一行却未保存时如果点击header排序会出现'行142字符6983,modified为空或不是对象' }); //表单窗体 var memberAddWindow; var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, renderTo: 'member_grid', resizeable:true, width:640, height:480, title:'员工管理', frame:true, clicksToEdit:1, sm:sm, iconCls:'icon-grid', loadMask: true, stripeRows:true, tbar:[ {// 添加按钮 text:'添加', iconCls:'user_add', handler:function(){ var m = new Member({ name:'新员工', sex:'m', age:'20', birth:new Date().clearTime() }); grid.stopEditing(); store.insert(0, m); grid.startEditing(0, 2); store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改 } },'-',{ id:'newWindowButton', text:'新面板中添加', iconCls:'user_add', handler:function(){ showMemerAddWindow(); //显示表单所在窗体 } },'-',{//删除按钮 id:'btnDelete', text:'删除', iconCls:'user_delete', handler:function(){ var sm = grid.getSelectionModel(); var selected = sm.getSelections(); var ids = []; for(var i=0;i<selected.length;i+=1){ var member = selected[i].data; if(member.id) { ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除 }else{ //如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行 store.remove(store.getAt(i)); } } if(ids.join('')=='') return; Ext.Msg.confirm('信息','确定要删除所选项吗?',function(btn){ if(btn=='yes'){ //发送删除请求 Ext.lib.Ajax.request( 'POST', './member_manage.jsp',{ success:function(request){ var message = request.responseText; Ext.Msg.alert('信息',message); store.reload(); },failure:function(){ Ext.Msg.alert('错误','删除时出现未知错误.'); } }, 'command=delete&ids='+ids ); } }); } },'-',{//保存按钮 text:'保存', iconCls:'save', handler:function(){ var json = []; for(i=0,cnt=store.getCount();i<cnt;i+=1){ var record = store.getAt(i); if(record.dirty) // 得到所有修改过的数据 json.push(record.data); } if(json.length==0){ Ext.Msg.alert('信息','没有对数据进行任何更改'); return; } //发送保存请求 Ext.lib.Ajax.request( 'POST', './member_manage.jsp',{ success:function(request){ var message = request.responseText; Ext.Msg.alert('信息',message); store.reload(); //grid.getView().refresh(); }, failure:function(){ Ext.Msg.alert("错误", "与后台联系的时候出现了问题"); } }, 'command=save&members='+encodeURIComponent(Ext.encode(json)) ); } },'-'], bbar: new Ext.PagingToolbar({ pageSize: 10, store: store, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有记录" }) }); store.load({params:{start:0,limit:10}}); /** * 以下是表单 __________________________________________________ * */ //姓名字段 var nameField = new Ext.form.TextField({ fieldLabel:'姓名', name:'memberName', allowBlank:false, anchor:'90%' }); //性别字段 var sexField = new Ext.form.ComboBox({ fieldLabel:'性别', name:'sex', allowBlank:false, mode: 'local', readOnly:true, triggerAction:'all', anchor:'90%', store:new Ext.data.SimpleStore({ fields:['value','text'], data:[ ['m','男'], ['f','女'] ] }), valueField: 'value', displayField: 'text' }); //年龄字段 var ageField = new Ext.form.NumberField({ fieldLabel:'年龄', name:'age', allowBlank:false, allowNegative:false, allowDesimals:false, maxValue:80, minValue:18, anchor:'90%' }); //生日字段 var birthField = new Ext.form.DateField({ fieldLabel:'出生日期', name:'birth', format:'Y-m-d', readOnly:true, anchor:'90%' }); //表单对象 var memberForm = new Ext.FormPanel({ labelAlign: 'top', frame:true, title: '添加新员工信息', width: 300, url:'./member_manage.jsp?command=insert', items: [{ layout:'column',// 该FormPanel的layout布局模式为列模式(column),包含2列 items:[ {//第一列 columnWidth:0.5, layout: 'form', items: [nameField,sexField] },{//第二列 columnWidth:0.5, layout: 'form', items: [ageField,birthField] }] }], buttons:[{ text:'提交', handler:function(){ if(memberForm.getForm().isValid()) memberForm.getForm().submit({ waitMsg:'保存中,请稍后...', success:function(){ memberForm.getForm().reset(); memberAddWindow.hide(); store.reload(); } }); } },{ text:'取消', handler:function(){ memberForm.getForm().reset(); memberAddWindow.hide(); } }] }); //窗体对象 function showMemerAddWindow(){ if(!memberAddWindow){ memberAddWindow = new Ext.Window({ el:'window_win', layout:'fit', width:300, height:200, closable:true, closeAction:'hide', plain:true, items: [memberForm] }); } memberAddWindow.show(Ext.get('newWindowButton')); } });
/** * * SignManage.js * @author zuoming99 * * */ Ext.onReady(function(){ //初始化鼠标提示 Ext.QuickTips.init(); //Record var Sign = Ext.data.Record.create([ //{name:'id',type:'int'}, {name:'signDate',type:'date',dateFormat:'Y-m-d'}, //数据读取模式为 2008-1-1 {name:'signTime',type:'string'}, {name:'cname',type:'string'} ]); var today = new Date().dateFormat('Y-m-d'); var week = ['天','一','二','三','四','五','六']; function getWeek(ymd){ //得到星期几,参数格式2008-01-01 ymd = ymd.split('-'); var date = new Date(); date.setFullYear(eval(ymd[0])); date.setMonth(eval(ymd[1])-1); date.setDate(eval(ymd[2])); return '星期'+week[date.getDay()]; } //数据储备器 var signStore = new Ext.data.JsonStore({ url:'./sign_control.jsp', baseParams:{startDate:today,endDate:today,command:'query'}, //totalProperty:'count', root:'records', fields:Sign, sortInfo:{field:'signTime',direction:'ASC'} }); //全选Checkbox var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false}); //列模型 var columnModel = new Ext.grid.ColumnModel([ sm, new Ext.grid.RowNumberer(),{ header:'姓名', dataIndex:'cname', width:100 },{ header:'签到时间', dataIndex:'signTime', width:80, renderer:function(v){ if(v<='09:00') return '<span class="green">'+v+'</span>'; else return '<span class="red">'+v+'</span>'; } },{ header:'工作日', dataIndex:'signDate', width:80, renderer:function(v){ //显示模式为2008-01-01 return v ? v.dateFormat('Y-m-d') : ''; } },{ header:'星期', dataIndex:'signDate', width:80, renderer:function(v){ v = v.dateFormat('Y-m-d') return getWeek(v); } } ]); columnModel.defaultSortable=true; //进行签到 function doSign(){ var signTime = new Date().toString().substr(10,5); Ext.Ajax.request({ url:'./sign_control.jsp?command=sign&signTime='+signTime, success:function(request){ var userInfo = eval('('+request.responseText.trim()+')'); if(userInfo.success===true){ signStore.reload(); btnSign.disable(); } }, failure:function(){ Ext.Msg.alert('错误','无法链接服务器.'); } }); } //查询-开始日期 var sdField = new Ext.form.DateField({ id:'startDate', name:'startDate', format:'Y-m-d', minValue:'2008-02-01', maxValue:'2009-12-31', allowBlank:false, value:today }); //查询-结束日期 var edField = new Ext.form.DateField({ id:'endDate', name:'endDate', format:'Y-m-d', minValue:'2008-02-01', maxValue:'2009-12-31', allowBlank:false, value:today }); //查询按钮 var btnSearch = new Ext.Button({ text:'查询', iconCls:'icon-search', handler:function(){ if(sdField.isValid() && edField.isValid()){ signStore.baseParams.startDate=sdField.getValue().dateFormat('Y-m-d'); signStore.baseParams.endDate=edField.getValue().dateFormat('Y-m-d'); } signStore.load(); } }); //登录按钮 var btnLogon = new Ext.Button({ id:'btnLogon', text:'登录', iconCls:'icon-logon', handler:function(){ logonWin.show('btnLogon'); } }); //签到按钮 var btnSign = new Ext.Button({ id:'btnSign', text:'签到', iconCls:'icon-sign', handler:doSign }); //修改密码按钮 var btnChangePwd = new Ext.Button({ id:'btnChangePwd', text:'修改密码', iconCls:'icon-logon', handler:function(){ changePwdWin.show('btnChangePwd'); } }); //退出按钮 var btnLogout = new Ext.Button({ id:'btnLogout', text:'退出', iconCls:'icon-logout', handler:function(){ Ext.Ajax.request({ url:'./sign_control.jsp?command=logout', success:function(){ btnLogon.enable(); btnLogout.disable(); btnSign.disable(); btnChangePwd.disable(); }, failure:function(){ Ext.Msg.alert('错误','无法链接服务器.'); } }); } }); //导出按钮 var btnExport = new Ext.Button({ id:'btnExport', text:'导出', iconCls:'icon-export', handler:function(){ if(sdField.isValid() && edField.isValid()){ var startDate=sdField.getValue().dateFormat('Y-m-d'); var endDate = edField.getValue().dateFormat('Y-m-d'); Ext.Ajax.request({ url:'./sign_control.jsp?command=query', params:{ startDate:startDate, endDate:endDate }, success:function(response){ var json = eval('('+response.responseText.trim()+')'); var records = json.records; var html = [ '<table border=1><tr><th>姓名</th><th>日期</th><th>时间</th><th>星期</th></tr>' ]; for(var i=0;i<records.length;i+=1){ var rc = records[i]; html.push('<tr><td>'+rc.cname+'</td><td>'+rc.signDate+'</td><td>'+rc.signTime+'</td><td>'+getWeek(rc.signDate)+'</td></tr>'); } html.push('</table>'); html = html.join(''); //最后生成的HTML表格 tableToExcel(html); //document.getElementById('debuger').innerHTML=html; }, failure:function(response){ Ext.Msg.alert('信息',response.responseText.trim()); } }); } } }); //创建Grid var signGrid = new Ext.grid.GridPanel({ store:signStore, cm:columnModel, sm:sm, renderTo:'sign_grid', width:600, height:440, title:'员工签到信息管理系统', frame:true, iconCls:'icon-grid', loadMask:true, stripeRows:true, tbar:[ '日期从',sdField,' 到 ',edField,' ',btnSearch,'-', btnLogon,btnSign,btnChangePwd,btnLogout,btnExport ] }); btnLogout.disable(); //退出按钮 btnSign.disable(); //签到按钮 btnChangePwd.disable(); //修改密码按钮 signStore.load(); //登录-用户名字段 var enameField = new Ext.form.TextField({ fieldLabel:'用户名', id:'ename', name:'ename', allowBlank:false, anchor:'100%' }); //登录-密码字段 var pwdField = new Ext.form.TextField({ fieldLabel:'密码', id:'pwd', name:'pwd', allowBlank:false, inputType:'password', anchor:'100%' }); //登录表单 var logonForm = new Ext.form.FormPanel({ labelAlign:'right', labelWidth:50, frame:true, //title:'用户登录', url:'./sign_control.jsp?command=logon', items:[ enameField ,pwdField ], buttons:[{ text:'登录', handler:function(){ var f = logonForm.getForm(); if(f.isValid()){ f.submit({ waitMsg:'登录中,请稍候...', success:function(form, action){ if(action.result.logonOK===false){ Ext.Msg.alert('信息',action.result.msg); return; } f.reset(); logonWin.hide(); btnLogon.disable(); btnLogout.enable(); btnChangePwd.enable(); if(action.result.signed===false){//如果已签到,则禁用签到按钮 btnSign.enable(); } }, failure:function(){ Ext.Msg.alert('错误','无法链接服务器.'); } }); } } },{ text:'取消', handler:function(){ logonForm.getForm().reset(); logonWin.hide(); } }] }); //登录窗口 var logonWin = new Ext.Window({ title:'用户登录', autoHeight:true, width:300, closeAction:'hide', items:[logonForm] }); //修改密码表单 var changePwdForm = new Ext.FormPanel({ labelAlign:'right', labelWidth:70, frame:true, url:'./sign_control.jsp?command=changePwd', items:[ new Ext.form.TextField({ id:'oldPassword', name:'oldPassword', fieldLabel:'原密码', inputType:'password', allowBlank:false, anchor:'100%' }), new Ext.form.TextField({ id:'newPassword', name:'newPassword', fieldLabel:'新密码', inputType:'password', allowBlank:false, anchor:'100%' }), new Ext.form.TextField({ id:'newPassword2', name:'newPassword2', fieldLabel:'重复密码', inputType:'password', allowBlank:false, anchor:'100%' }) ], buttons:[{ text:'提交', handler:function(){ var f = changePwdForm.getForm(); if(!f.isValid()) return; if(Ext.get('newPassword').getValue() != Ext.get('newPassword2').getValue()){ Ext.Msg.alert('信息','两次输入的密码不一致'); return; } f.submit({ waitMsg:'执行中,请稍候...', success:function(form, action){ Ext.Msg.alert('信息',action.result.msg); if(action.result.changeOK===false){ //如果失败的话 return; } f.reset(); changePwdWin.hide(); }, failure:function(){ Ext.Msg.alert('错误','无法链接服务器.'); } }); } },{ text:'取消', handler:function(){ changePwdForm.getForm().reset(); changePwdWin.hide(); } }] }); //修改密码窗口 var changePwdWin = new Ext.Window({ title:'修改密码', autoHeight:true, width:300, closeAction:'hide', items:[changePwdForm] }); });
- MichealWazowski.rar (1.9 MB)
- 下载次数: 6732
评论
13 楼
dabing0017
2009-02-17
sign 的登陆密码是多少啊 请问一下啊
12 楼
xiaorongjuan
2008-07-25
good 我刚在学
11 楼
feohoo
2008-05-29
使用EXTTLD能给我们带来意想不到的好处,我们能更多的关注我们的后台
10 楼
zuoming99
2008-05-19
关于store.remove(store.getAt(i)) )
store.getAt(i) 和 selected[i] 返回的对象应该是一样的
store.getAt(i) 和 selected[i] 返回的对象应该是一样的
9 楼
zuoming99
2008-05-19
呵呵 谢谢大家批评指正,我也只是刚摸到Ext,对很多东西还都不了解.
我们的项目经理觉得Ext的EditorGridPanel比较感兴趣,想让我拿过来用用,不过后来因为客户端机器比较陈旧的原因还是作罢了
我们的项目经理觉得Ext的EditorGridPanel比较感兴趣,想让我拿过来用用,不过后来因为客户端机器比较陈旧的原因还是作罢了
8 楼
zgh207
2008-05-18
有源码吗?
请给小弟发一份,zgh207@163.com
请给小弟发一份,zgh207@163.com
7 楼
pkjiaoda
2008-05-17
错误处理不是很好哦,应该在这方面加强一下
6 楼
jacky9692
2008-05-16
{ text: '删除', handler: function(){ var sm = grid.getSelectionModel(); var selected = sm.getSelections(); var ids = []; for(var i=0;i<selected.length;i++){ var member = selected[i].data; alert(selected[i].data.Author); if(member.id) { ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除 }else{ //如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行 store.remove(selected[i]); } }
store.remove(selected[i]); (楼主这个地方错了!不是store.remove(store.getAt(i)) );
5 楼
fangzhouxing
2008-05-13
用RESTful架构风格来做CRUD更加简单(目前正在用python/django作为后台)。
4 楼
laitaogood
2008-05-12
这么多代码糅合在一起的话,读起来确实很费劲,如果是让别人来维护肯定是一种折磨哦
为什么不把那些组件扩展封装呢
比如说 一个LoginForm ,你可以把它扩展成你自己的LoginForm.js啊,需要用的时候,直接new一个就行了啊
为什么不把那些组件扩展封装呢
比如说 一个LoginForm ,你可以把它扩展成你自己的LoginForm.js啊,需要用的时候,直接new一个就行了啊
3 楼
pkjiaoda
2008-05-10
谢谢,可以直接运行吗?
2 楼
stworthy
2008-05-05
三四百行JS代码,读起来有些难以消受。
1 楼
supernaturalmagician
2008-05-05
很基础 最好加一个layout,左边是树,右边通过tab展开
相关推荐
在IT行业中,"JSP+Ext实现CURD"是一个常见的开发任务,涉及到Web应用的后端和前端交互,用于数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。JSP(JavaServer Pages)是Java的一种动态网页技术,...
2. **Service层**:业务逻辑的实现,可以是接口和实现类,通常由Spring管理并提供依赖注入。 3. **DAO层**:数据访问对象,通过iBatis与数据库交互,执行SQL查询。 4. **实体类**:对应数据库中的表,用于存储和传输...
本教程将详细讲解如何利用EXT实现SQL Server数据表的CURD操作,并提供一个可以直接使用的EXT应用程序示例。 **1. CURD操作** CURD是数据库操作的基本概念,代表Create(创建)、Read(读取)、Update(更新)和...
2. JavaScript 文件:包含了Ajax请求的实现,使用JavaScript的XMLHttpRequest对象或更现代的fetch API向Servlet发送请求,并处理返回的JSON数据。 3. Servlet 类:Java后端代码,处理Ajax请求,执行数据库操作,并将...
通过Spring Initializr快速生成springboot项目+mybatis generator反向生成代码+easyui 的表单设计(增删改查-分页)+ajax异步操作+mysql源数据库+单元测试+详细注解及个人编程的运到困难
可借鉴此优质项目实现复刻,也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担 2. 部分字体及插图等来自网络,若是侵权请联系删除,本人不对所涉及的...
Linq使得代码更加简洁、可读性更强,同时也提高了开发效率。在EF中,Linq与数据库交互,允许开发者使用强大的查询表达式来操作数据。 **Lambda 表达式** Lambda表达式是C#中的匿名函数,它可以简化代码,尤其是...
在这个项目中,MySQL用于创建、查询、更新和删除数据库中的记录,配合JSP实现CRUD功能。 3. **增删改查 (CRUD)** CRUD代表Create(创建)、Read(读取)、Update(更新)和Delete(删除),是任何数据管理系统的四...
9. 视图(View)通常由JSP、HTML或Thymeleaf等模板技术实现,展示数据。 通过这个项目,开发者可以学习到如何整合这三个框架,理解它们各自的作用以及如何协同工作。此外,还能掌握如何进行数据库操作,处理多表...
Java后台结合EasyUI实现CURD操作是Web应用开发中常见的需求,主要涉及到Java后端编程、数据库操作以及前端用户界面的设计。在这个项目中,“java后台+easyui完整curd”是一个利用Java技术和EasyUI框架构建的简单但...
在与 Struts2 集成时,Spring 可以作为服务层,管理 Struts2 动作类的依赖,提供数据访问对象(DAO)和业务服务接口的实现。 3. **iBatis**: iBatis 是一个 SQL 映射框架,它允许开发者编写 SQL 而不是使用 ORM...
MVC3增强了对razor语法的支持,使得视图渲染更加简洁高效。 **Entity Framework概述** Entity Framework提供了一种基于代码的复杂数据访问层,通过ADO.NET Entity Data Model工具,可以自动生成数据库架构或者根据...
在ASP.NET MVC3项目中,结合Entity Framework或NHibernate等ORM(对象关系映射)工具,可以利用LINQ轻松实现对数据库的CURD(创建Create、读取Read、更新Update、删除Delete)操作。 下面,我们将深入探讨如何在MVC...
【标题】"etxjs+ssh的CURD(2)"涉及到的是使用ETXJS框架与SSH(Spring、Struts2、Hibernate)集成进行数据库操作的第二部分知识。在这个主题中,我们将深入探讨如何利用这些技术进行创建(Create)、读取(Read)、...
在IT领域,数据库管理和应用程序开发是至关重要的技能。在这个项目中,我们主要关注的是使用C#编程语言,结合SQL Server 2008数据库管理系统,以及Visual ...同时,这也为构建更复杂的企业级应用程序打下了坚实的基础。
《springboot集成mybatisplus》 --- 常用CURD操作
这三个框架在企业级应用开发中广泛使用,用于实现快速的CURD操作,即创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)数据的功能。 Spring Boot简化了Spring应用程序的初始化和配置过程,它集成了大量的...
课程管理(实现对课程的CURD) 考试成绩录入 各种查询(学生的单科成绩、总成绩、排名) 各种统计(统计及格率、统计80分以上的同学等) 管理端权限 登录系统 实现对学生的CURD 实现对老师的CURD 实现各种查询、...