SNF快速开发平台3.0之--asp.net mvc4 强大的导出和不需要上传文件的批量导入EXCEL

浏览数：212 / 时间：2015年06月09日

数据的导入导出，在很多系统里面都比较常见，这个导入导出的操作，在Winform里面比较容易实现，但在Web上我们应该如何实现呢？本文主要介绍利用MVC4+EasyUI的特点，并结合文件上传控件，实现文件不需要上传到服务器上就可以马上进行处理并显示，然后确认后把数据写入数据库的过程。

我们知道，Web上对Excel的处理和Winform的有所差异，如果是在Web上处理，我们需要把Excel文档上传到服务器上，然后读取文件进行显示。但在SNF上确实实现了与Winform一样的不需要上传到服务器，而是直接读取的技术，这是种挑战。

目前SNF导入组件的功能需求如下：

1. 要做到通用，不能一个页面相同的工作再做一遍，就算复制也不可以因为维护成本太高。

2. 要有导入预览，保存前确认数据是否正确。

3. 针对是否这样数据类型进行格式化，不要显示true/false或者1/0。

4. 可以针对导入的预览数据进行删除某行。

5. 可以下载导入模版。

6. 要操作简单实用

7. Web导入也不要先上传到服务器上再读取的方式，也要像winform一样不上传到服务器上进行直接读取。大家都知道对于BS这种要求还是比较困难的，没办法既然有需求就要想办法。

在Winform里面，我们处理Excel数据导入的界面如下所示。

技术分享

在Web上的主界面如下所示。

技术分享

导入界面如下所示

技术分享

选择文件后显示的效果，并且导入文件有效列1与0进行了格式化如下

技术分享

确认数据没有问题后，点击保存导入数据成功后如下提示：

技术分享

导入模版：

技术分享

2、Web数据导入的处理逻辑和代码

为了实现Web上的数据导入导出操作，我们需要增加两个按钮，一个是导入按钮，一个是导出按钮。

<a class="easyui-linkbutton" data-bind="click:importClick" href="#" icon="icon-page_white_excel" plain="true" title="导入">导入</a></div>

导入的JS处理代码如下所示。

//导入        
    this.importClick = function () {
        snf.importExcel(html, ‘（角色-导入角色数据）‘, ‘ImportRoleTemplate‘, ‘系统角色-模版‘, ‘-api-sys-role-PostImportRole‘, ‘icon-group‘);

上面主要就是弹出一个窗口（上面的导入数据窗口），用来方便客户选择Excel文件并保存数据或者下载导入模板等操作的。

然后在Import.cshtml的视图代码里面，我们需要初始化Datagrid和相关的界面元素，初始化DataGrid的代码如下所示。

<div class="z-toolbar">
               <a id="a_save"    href="#" plain="true" class="easyui-linkbutton" icon="icon-save"          title="保存导入数据" data-bind="click:saveClick">  保存导入数据</a>
               <a id="a_delete"  href="#" plain="true" class="easyui-linkbutton" icon="icon-cross"         title ="删除"        data-bind="click:deleteClick"> 删除</a>
               <a id="a_refresh" href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新"         data-bind="click:refreshClick">刷新</a>
             
               <div style=" position:absolute; right:10px;">
                   <a id="a_downloadFile"  href="#" target="_blank"  class="icon-page_excel" title="模版.xls" data-bind="attr: { ‘title‘: form.templateName },click:downloadFileClick">
                       &nbsp;&nbsp;<span data-bind="text:form.templateName" style="margin-left:5px;"></span></a>
               </div>
            </div>

            <table id="grid" data-bind="datagrid:grid"> </table>

3、Web上SNF标准数据导出操作

显示增加导出按钮：

<a href="#" plain="true" class="easyui-splitbutton" data-options="menu:‘#dropdown1‘,iconCls:‘icon-download‘"  data-bind="click:downloadClick"  >导出</a>