码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-01-22 10:51:46      阅读:316      评论:0      收藏:0      [点我收藏+]

标签:

数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在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进行了格式化如下

技术分享

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

技术分享

导入模版:

技术分享

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

为了实现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>

技术分享

作者:王春天 2015-01-22

作者Blog:http://www.cnblogs.com/spring_wang

原文:http://www.cnblogs.com/spring_wang/p/4240939.html

如果觉得还不错,欢迎转载。

 

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

标签:

原文地址:http://www.cnblogs.com/spring_wang/p/4240939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!