近期在一个商务项目中,负责了一个导入的模块开发,从后台模型的设计到最终编码的开发在一定期限内完成,单从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技术提交的表单。 插件里面主要 的方法, ajaxForm
和 ajaxSubmit
, 能够从form组件里采集信息确定如何处理表单的提交过程。
例如:在页面中添加一个Form
<form id="myForm" action="comment.action" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit" />
</form>
引入Jquery和Form Plugin Javascript后,在JS中如下提交方式即可:
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("*********");
});
});
</script>
补充:除了ajaxForm、ajaxSubmit方式外,还有formSerialize方法即将表单序列化、fieldSerialize即将Form中部分元素序列化、resetForm表单重置、clearForm清空form等方法...
ajaxForm
和 ajaxSubmit
都支持大量的可选参数,它们通过可选参数项对象传入。可选参数项对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:
target
用server端返回的内容更换指定的页面元素的内容。 这个值可以用jQuery 选择器来表示, 或者是一个jQuery 对象, 一个 DOM 元素。缺省值: null
<script>
// 设置对话框全局默认配置
(function(){
var d = art.dialog.defaults;
// 按需加载要用到的皮肤,数组第一个为默认皮肤
// 如果只使用默认皮肤,可以不填写skin
d.skin = ['default', 'chrome', 'facebook', 'aero'];
// 支持拖动
d.drag = true;
// 超过此面积大小的对话框使用替身拖动
d.showTemp = 100000;
})();
</script>
注:在IE7以下版本对于artDialog弹出的对话框会不起作用,解决方法参考http://hi.baidu.com/ferry2004/blog/item/8dd068df58df2f044954039b.html
常用方法如下:
名称 | 描述 | ||
---|---|---|---|
art.dialog.alert(content) | 警告 | ||
art.dialog.confirm(content, yesFn, noFn) | 确认 | ||
art.dialog.prompt(content, yesFn, value) | 提问 | ||
art.dialog.open(url, options) | 弹窗(iframe) | ||
art.dialog.close() | open方法创建的iframe里可用此关闭对话框 | ||
art.dialog.parent | open方法创建的iframe里可用此获取来源窗口的window对象 | ||
art.dialog.tips(content, time) | 短暂提示 | ||
art.dialog.load(url, options, cache) | Ajax加载内容 | ||
art.dialog.get(id, win) | 获取指定ID对话框的API. 第一个参数为ID,第二个默认当前window |