在很多系统模块里面，我们可能都需要进行一定的数据交换处理，也就是数据的导入或者导出操作，这样的批量处理能给系统用户更好的操作体验，也提高了用户录入数据的效率。本文基于Bootstrap的框架基础上，再对这个模块进行更新处理，以及Office文档或者图片等附件的查看处理。
1、数据的导入操作
一般系统模块里面，都有数据导入和导出操作，因此在界面自动生成的时候，我都倾向于给用户自动生成这些标准的查询、导入、导出等操作功能，界面效果如下所示。
导入操作，在Bootstrap框架里面，我把它作为一个层的，都统一放在index.cshtml文件里面，这样可以使得整个界面的处理更加紧密一点，示例代码如下所示。
下面这些代码一般情况下，都是自动生成的，包括所需的全部字段，我们一般是根据需要进行字段的裁剪，以适应我们的业务和实际需要。
<!--导入数据操作层--> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"></button> <h4>文件导入</h4> </div> <div> <div> <a href="https://www.jb51.net/~/Content/Template/User-模板.xls"> <img alt="测试用户信息-模板" src="https://www.jb51.net/~/Content/images/ico_excel.png" /> <span>User-模板.xls</span> </a> </div> <hr/> <form method="post"> <div title="Excel导入操作" data-options="iconCls:'icon-key'"> <input type="hidden" /> <input type="file" multiple="multiple"> <a href="javascript:;">上传</a> <a href="javascript:;">取消</a> <div></div> <br /> <hr /> <div></div> <br /> </div> </form> <!--数据显示表格--> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th><input type="checkbox"></th> <th>用户编码</th> <th>用户名/登录名</th> <th>真实姓名</th> <th>职务头衔</th> <th>移动电话</th> <th>办公电话</th> <th>邮件地址</th> <th>性别</th> <th>QQ号码</th> <th>备注</th> </tr> </thead> <tbody></tbody> </table> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">保存</button> </div> </div> </div> </div>
我们如果要显示导入操作界面，那么只需要把这个层显示出来即可，如下脚本所示。
//显示导入界面 function ShowImport() { $("#import").modal("show"); }
这里的文件上传处理，主要使用了Uploadify的这个控件进行处理的，当然也可以利用我前面介绍过的File Input上传控件进行处理，都可以很好实现这些导入操作。
一般情况下的Uploadify控件的初始化代码如下所示
$(function () { //添加界面的附件管理 $('#file_upload').uploadify({ 'swf': '/Content/JQueryTools/uploadify/uploadify.swf', //FLash文件路径 'buttonText': '浏 览', //按钮文本 'uploader': '/FileUpload/Upload', //处理上传的页面 'queueID': 'fileQueue', //队列的ID 'queueSizeLimit': 1, //队列最多可上传文件数量，默认为999 'auto': false, //选择文件后是否自动上传，默认为true 'multi': false, //是否为多选，默认为true 'removeCompleted': true, //是否完成后移除序列，默认为true 'fileSizeLimit': '10MB', //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值 'fileTypeDesc': 'Excel Files', //文件描述 'fileTypeExts': '*.xls', //上传的文件后缀过滤器 'onQueueComplete': function (event, data) { //所有队列完成后事件 //业务处理代码 //提示用户Excel格式是否正常，如果正常加载数据 }, 'onUploadStart': function (file) { InitUpFile();//上传文件前 ，重置GUID，每次不同 $("#file_upload").uploadify("settings", 'formData', { 'folder': '数据导入文件', 'guid': $("#AttachGUID").val() }); //动态传参数 }, 'onUploadError': function (event, queueId, fileObj, errorObj) { //alert(errorObj.type + "：" + errorObj.info); } }); });
关键的逻辑就是：
//业务处理代码
一般情况下，我们在这里已经在服务器里面获得了Excel文件了，因此需要对这个文件的格式进行处理，如果格式正确，那么我们把数据显示出来，供导入用户进行记录的选择，决定导入那些记录即可。
处理检查Excel数据格式的代码如下所示。