基于MVC+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出

数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章《Winform开发框架之通用数据导入导出操作》介绍了在Winform里面的通用导入导出模块的设计和开发过程,但在Web上我们应该如何实现呢?本文主要介绍利用MVC4+EasyUI的特点,并结合文件上传控件Uploadify 的使用,实现文件上传后马上进行处理并显示,然后确认后把数据写入数据库的过程。
我们知道,Web上对Excel的处理和Winform的有所差异,如果是在Web上处理,我们需要把Excel文档上传到服务器上,然后读取文件进行显示,所以第一步是实现文件的上传操作,关于文件上传控件,具体可以参考我的文章《基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用》。

1、导入数据的界面效果展示

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


基于MVC+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出_第1张图片

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


基于MVC+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出_第2张图片

导入界面如下所示。
基于MVC+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出_第3张图片

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

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

 导入
 导出

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

//显示导入界面
function ShowImport() {
    $.showWindow({
        title: '客户联系人-Excel数据导入',
        useiframe: true,
        width: 1024,
        height: 700,
        content: 'url:/Contact/Import',
        buttons: [{
            text: '取消',
            iconCls: 'icon-cancel',
            handler: function (win) {
                win.close();
            }
        }]
    });
}

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

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

//实现对DataGird控件的绑定操作
function InitGrid() {
    var guid = $("#AttachGUID").val();
    $('#grid').datagrid({   //定位到Table标签,Table标签的ID是grid
        url: '/Contact/GetExcelData?guid=' + guid,   //指向后台的Action来获取当前用户的信息的Json格式的数据
        title: '客户联系人-Excel数据导入',
        iconCls: 'icon-view',
        height: 400,
        width: function () { return document.body.clientWidth * 0.9 },//自动宽度

        ..................

上面红色部分的内容,就是我们在文件顺利上传到服务器上的时候,根据一个guid的参数初始化DataGrid的列表数据。

下面是附件上传控件uploadify的初始化脚本代码,其中红色部分注意一下,我们需要上传的是一个文件,并且不允许多选,限定上传文件的类型为xls。

文件上传完成后,首先调用CheckExcelColumns控制器函数来检查是否匹配导入模板的字段,如果匹配通过,加载Excel并展示数据到Datagrid里面,否则提示用户按模板格式录入数据。


                    
                    

你可能感兴趣的:(基于MVC+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出)