锁定老帖子 主题:商务项目中模块开发总结
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
||||||||||
---|---|---|---|---|---|---|---|---|---|---|
作者 | 正文 | |||||||||
发表时间:2011-06-07
最后修改:2011-06-08
近期在一个商务项目中,负责了一个导入的模块开发,从后台模型的设计到最终编码的开发在一定期限内完成,单从Excel导入来说,实现的手段有很多种,例如常用的POI、JXL等等都可以很容易的实现,两者的优缺点可参考http://yuqun888666.blog.163.com/blog/static/79175267200958111628873/ 下面说说自己的整个过程,首先设计后台模型,因为商务项目尽量做得灵活、可配置,所以后台模型对属性验证方面采取了可配置的正则验证设计,表之间级联关系采用常用的主外键关联,一方面优化查询,另一方面对于多个字段来说,count(key)相比count(*)优化,综合设计考虑后,后台模型参考以上几点设计要求基本确定完成了。 后台设计完之后,开始处理前台开发,首先和很多Web工程类似,都是左侧通过类似树形菜单,然后在右侧根据配置的超链接,显示相应的模块信息,在Excel文件批量导入中,通过一系列的级联操作、单选切换、自定义选择后,由用户可以动态勾选相应的导入信息,对于一系列操作规范、顺序校验后,动态拼接插入Sql,放到一个事务中,然后执行插入操作,基本流程如此......首先为了用户友好,前台采用Ajax的异步方式,这样在用户导入无论成功与否可以通过回调的方式,即时的给用户响应,如果错误信息,用户可以知道某行某列以及错误的原因等等(并且之前说了这些信息都是配置上的,方便了很多的操作),对于提交操作,由于很多的级联动态信息,所以如果Ajax参数传递方式,参数会有很多变量,所以采用了Ajax Form方式的异步提交,这里使用了Ajax的Form插件,对于回显的时候,由于Tab方式原界面还是保存,界面刷新效果不佳,所以采取的措施是通过弹出层的方式,然后通过动态添加tab,这里弹出层的方式采用了Ajax的一个artDialog插件,下面是两个插件的总结: 一、jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要 的方法, 例如:在页面中添加一个Form <form id="myForm" action="comment.action" method="post"> 引入Jquery和Form Plugin Javascript后,在JS中如下提交方式即可: <script type="text/javascript"> 补充:除了ajaxForm、ajaxSubmit方式外,还有formSerialize方法即将表单序列化、fieldSerialize即将Form中部分元素序列化、resetForm表单重置、clearForm清空form等方法...
target 用server端返回的内容更换指定的页面元素的内容。 这个值可以用jQuery 选择器来表示, 或者是一个jQuery 对象, 一个 DOM 元素。缺省值: 缺省值: 表单的 action 的值 缺省值: 表单的 method 的值 (如果没有指明则认为是 'GET')
缺省值: null 缺省值: dataType 选项用来指示你如何去处理server端返回的数据。 这个和 jQuery.httpData 方法直接相对应。 下面就是可以用的选项:
'xml': 如果 dataType == 'xml' 则 server 端返回的数据被当作是 XML 来处理, 这种情况下'success'指定的回调函数会被传进去 responseXML 数据 'json': 如果 dataType == 'json' 则server端返回的数据将会被执行,并传进'success'回调函数 'script': 如果 dataType == 'script' 则server端返回的数据将会在上下文的环境中被执行 缺省值: var options = { target: '#divToUpdate', url: 'comment.php', success: function() { alert('*********'); } }; $('#myForm').ajaxForm(options); 二、artDialog弹出层插件:artDialog是一个轻巧且高度兼容的javascript对话框组件 优点: 1、自适应内容: 无需预设高宽, 对话框与按钮自适应消息内容的大小 2、文本智能对齐: 如果设置了对话框宽度,短文本居中对齐, 而长文本居左对齐 3、容错能力: 如果定义的宽度高度小于内容大小不会出现错位 4、界面机制: 九宫格布局, 样式钩子与结构丰富, 可定制自适应皮肤 5、跨浏览器支持: 支持 Firefox, Chrome, Safari, IE6+, Opera .. 6、轻巧: 不依赖第三方库, js压缩后10kb左右 7、IE6无抖动静止定位: 在 IE6 下可实现与现代浏览器一样完美无闪动静止定位效果 8、定位修正: 使用自定义坐标的时候智能修正位置, 不会超出边界 9、拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制 使用方法: 使用的方式类似Jquery的Dialog,导入JS文件后,在界面中配置下参数如下:
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
||||||||||
返回顶楼 | ||||||||||
浏览 5240 次