数量的导入导出,在广大体系里面都相比宽泛,这几个导入导出的操作,在Winform里面相比易于完结,小编已经在以前的一篇小说《Winform开发框架之通用数据导入导出操作》介绍了在Winform里面包车型大巴通用导入导出模块的规划和开销进程,但在Web上我们应该如何落成啊?本文首要介绍利用MVC4+EasyUI的风味,并结成文件上传控件Uploadify
的采用,完结公文上传后立刻开始展览拍卖并出示,然后确认后把数据写入数据库的长河。

笔者们领略,Web上对Excel的处理和Winform的具有差别,假诺是在Web上拍卖,咱们须求把Excel文书档案上传到服务器上,然后读取文件进行展现,所以率先步是落实文件的上传操作,关于文件上传控件,具体能够参照我的篇章《据悉MVC4+EasyUI的Web开发框架形成之旅–附属类小部件上传组件uploadify的使用》。

① 、导入数据的界面效果显示

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

jQuery 1

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

jQuery 2

导入界面如下所示。

jQuery 3

 

二 、Web数据导入的拍卖逻辑和代码

为了促成Web上的数额导入导出操作,大家需求追加七个按钮,多个是导入按钮,三个是导出按钮。

 <a href="javascript:void(0)" class="easyui-linkbutton" id="btnImport" iconcls="icon-excel" onclick="ShowImport()">导入</a>
 <a href="javascript:void(0)" class="easyui-linkbutton" id="btnExport" iconcls="icon-excel" onclick="ShowExport()">导出</a>

导入的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 },//自动宽度

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

地点墨绿部分的始末,就是我们在文件顺遂上传播服务器上的时候,依据2个guid的参数起头化DataGrid的列表数据。

上边是附属类小部件上传控件uploadify的开始化脚本代码,个中米白部分注意一下,我们须求上传的是二个文本,并且分化意多选,限定上传文件的品种为xls。

文本上传达成后,首先调用CheckExcelColumns控制器函数来检查是或不是匹配导入模板的字段,如若合作通过,加载Excel并展示数据到Datagrid里面,不然提示用户按模板格式录入数据。

    <script type="text/javascript">
        $(function () {
            //添加界面的附件管理
            $('#file_upload').uploadify({
                'swf': '/Content/JQueryTools/uploadify/uploadify.swf',  //FLash文件路径
                'buttonText': '浏  览',                                 //按钮文本
                'uploader': '/FileUpload/Upload',                       //处理ASHX页面
                '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) {    //所有队列完成后事件
                    var guid = $("#AttachGUID").val();
                    ViewUpFiles(guid, "div_files");

                    //提示用户Excel格式是否正常,如果正常加载数据
                    $.ajax({
                        url: '/Contact/CheckExcelColumns?guid=' + guid,
                        type: 'get',
                        dataType:'json',
                        success: function (data) {
                            if (data.Success) {                                
                                InitGrid(); //重新刷新表格数据
                                $.messager.alert("提示", "文件已上传,数据加载完毕!");
                            }
                            else {
                                $.messager.alert("提示", "上传的Excel文件检查不通过。请根据页面右上角的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里面含有了总体的字段即可。

        /// <summary>
        /// 检查Excel文件的字段是否包含了必须的字段
        /// </summary>
        /// <param name="guid">附件的GUID</param>
        /// <returns></returns>
        public ActionResult CheckExcelColumns(string guid)
        {
            CommonResult result = new CommonResult();

            try
            {
                DataTable dt = ConvertExcelFileToTable(guid);
                if (dt != null)
                {
                    //检查列表是否包含必须的字段
                    result.Success = DataTableHelper.ContainAllColumns(dt, columnString);
                }
            }
            catch (Exception ex)
            {
                LogTextHelper.Error(ex);
                result.ErrorMessage = ex.Message;
            }

            return ToJsonContent(result);
        }

 

而在InitGrid的开端化中的这些GetExcelData的控制器方法如下所示。首要的逻辑正是收获到Excel,并把Excel里面包车型客车数额转换为DataTable,最终早先化为实体类列表,并赶回给调用页面就足以了。

       /// <summary>
        /// 获取服务器上的Excel文件,并把它转换为实体列表返回给客户端
        /// </summary>
        /// <param name="guid">附件的GUID</param>
        /// <returns></returns>
        public ActionResult GetExcelData(string guid)
        {
            if (string.IsNullOrEmpty(guid))
            {
                return null;
            }

            List<ContactInfo> list = new List<ContactInfo>();
            DataTable table = ConvertExcelFileToTable(guid);
            if (table != null)
            {
                #region 数据转换
                int i = 1;
                foreach (DataRow dr in table.Rows)
                {
                    string customerName = dr["客户名称"].ToString();
                    if (string.IsNullOrEmpty(customerName))
                    {
                        continue;//客户名称为空,记录跳过
                    }

                    CustomerInfo customerInfo = BLLFactory<Customer>.Instance.FindByName(customerName);
                    if (customerInfo == null)
                    {
                        continue;//客户名称不存在,记录跳过
                    }

                    ContactInfo info = new ContactInfo();
                    info.Customer_ID = customerInfo.ID;//客户ID
                    info.HandNo = dr["编号"].ToString();
                    info.Name = dr["姓名"].ToString();
                     ..............................//增加一个特殊字段的转义
                    info.Data1 = BLLFactory<Customer>.Instance.GetCustomerName(info.Customer_ID);

                    list.Add(info);
                }
                #endregion
            }
            var result = new { total = list.Count, rows = list };
            return JsonDate(result);
        }

 

三 、Web上多少的导出操作 

刚刚介绍了多少的导入操作,数据的导出操作相对简单一些,它的JS函数操作如下所示。

        //导出Excel数据
        var exportCondition;
        function ShowExport() {
            var url = "/Contact/Export";
            $.ajax({
                type: "POST",
                url: url,
                data: exportCondition,
                success: function (filePath) {
                    var downUrl = '/FileUpload/DownloadFile?file=' + filePath;
                    window.location = downUrl;
                }
            });
        }

就算数额的导出相比简单一点,但是由于大家供给运用POST情势对数码标准举办提交,由此不像平日的方法下载文件Window.Open(url)就足以完结文件下载了。假使POST格局提交了参数,那么重临的数目正是是文件流,也心中无数举行中用的下载。

从上边的脚本我们得以看出,里面包车型大巴exportCondition正是我们须要交给到服务器的条件,服务器根据那个标准实行搜寻数据,并回到3个Excel文件就可以了。

出于采取ajax那种POST格局不能够直接下载文件流,因而,我们须求先依照标准,在服务器上转移文书,重临四个文书路径,再次通过DownloadFile方法进行文件的下载才方可。

故而那些传递的尺度也是很首要的,在查询操作的时候,大家得以把相应的标准化传递给它。

        //绑定搜索按钮的的点击事件
        function BindSearchEvent() {
            //按条件进行查询数据,首先我们得到数据的值
            $("#btnSearch").click(function () {
                //得到用户输入的参数
                //取值有几种方式:$("#id").combobox('getValue'), $("#id").datebox('getValue'), $("#id").val(),combotree('getValue')
                //字段增加WHC_前缀字符,避免传递如URL这样的Request关键字冲突
                var queryData = {
                     WHC_Name: $("#txtName").val(),
                     WHC_OfficePhone: $("#txtOfficePhone").val(),
                     WHC_Mobile: $("#txtMobile").val(),
                     WHC_Address: $("#txtAddress").val(),
                     WHC_Email: $("#txtEmail").val(),
                     WHC_Note: $("#txtNote").val()
                  }
                //将值传递给DataGrid
                InitGrid(queryData);

                //传递给导出操作
                exportCondition = queryData;

                return false;
            });
        }

在我们选定有个别树的节点的时候,大家也得以传递自定义的基准给它。

        //根据消息分组加载指定列表
        function loadByGroupTree(node) {
            //赋值给特殊字段,公司和部门查询的时候选择其中一个
            var queryParams = $('#grid').datagrid('options').queryParams;
            var condition = "{ id: \"" + node.id +"\", groupname:\"" + node.text +"\", userid:\"" + @Session["UserId"] + "\" }";
            queryParams.CustomedCondition = condition;//提供给datagrid的条件

            exportCondition = { CustomedCondition: condition };//提供给导出的条件

            $("#grid").datagrid("reload");
            $('#grid').datagrid('uncheckAll');
        }

后台的Export控制器方法首要的逻辑如下所示。

jQuery 4

最终是重回三个变迁好的文书地点。

末段给一个格局直接下载文件就能够了。

        /// <summary>
        /// 根据路径下载文件,主要用于生成的文件的下载
        /// </summary>
        /// <param name="filePath">文件路径</param>
        /// <returns></returns>
        public ActionResult DownloadFile(string file)
        {
            string realPath = Server.MapPath(file);
            string saveFileName = FileUtil.GetFileName(realPath);

            Response.WriteFile(realPath);
            Response.Charset = "GB2312";
            Response.ContentEncoding = Encoding.GetEncoding("GB2312");
            Response.ContentType = "application/ms-excel/msword";
            Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(saveFileName));
            Response.Flush();
            Response.End();

            return new FileStreamResult(Response.OutputStream, "application/ms-excel/msword");
        }

导出的Excel界面效果如下所示。

jQuery 5

由于篇幅的原由,这么些导入导出的操作就介绍到此地,希望有标题我们一起讨论。

 

依照MVC4+EasyUI的Web开发框架的一体系小说:

遵照MVC4+EasyUI的Web开发框架形成之旅–总体介绍

根据MVC4+EasyUI的Web开发框架形成之旅–MVC控制器的统一筹划

据悉MVC4+EasyUI的Web开发框架形成之旅–界面控件的使用

基于MVC4+EasyUI的Web开发框架形成之旅–附属类小部件上传组件uploadify的施用

基于MVC4+EasyUI的Web开发框架形成之旅–框架总体界面介绍

基于MVC4+EasyUI的Web开发框架形成之旅–基类控制器CRUD的操作

基于MVC4+EasyUI的Web开发框架形成之旅–权限控制

基于MVC4+EasyUI的Web开发框架经验总计(1)-利用jQuery Tags Input
插件显示选择记录

基于MVC4+EasyUI的Web开发框架经验总括(2)-
使用EasyUI的树控件塑造Web界面

遵照MVC4+EasyUI的Web开发框架经验总括(3)-
使用Json实体类营造菜单数据

依据MVC4+EasyUI的Web开发框架经验总计(4)–使用图表控件Highcharts

依照MVC4+EasyUI的Web开发框架经验总计(5)–使用HTML编辑控件CK艾德itor和CKFinder

依照MVC4+EasyUI的Web开发框架经验计算(6)–在页面中动用下拉列表的拍卖

依照MVC4+EasyUI的Web开发框架经验总结(7)–达成省份、城市、行政区三者联合浮动

依照MVC4+EasyUI的Web开发框架经验总计(8)–达成Office文书档案的预览

依照MVC4+EasyUI的Web开发框架经验总括(9)–在Datagrid里面实现外键字段的转义操作

依照MVC4+EasyUI的Web开发框架经验总计(10)–在Web界面上落实数据的导入和导出

遵照MVC4+EasyUI的Web开发框架经验总计(11)–使用Bundles处理简化页面代码

依照MVC4+EasyUI的Web开发框架经验总结(12)–利用Jquery处理多少交互的二种格局

基于MVC4+EasyUI的Web开发框架经验计算(13)–DataGrid控件完结全自动适应宽带高度

基于MVC4+EasyUI的Web开发框架经验总括(14)–自动生成图标准样品式文件和图标的取舍操作

相关文章

网站地图xml地图