据悉Metronic的Bootstrap开发框架经验统计(7)–数据的导入、导出及附件的查阅处理

在不少系统模块里面,我们兴许都急需开展一定的数据沟通处理,也就是数量的导入或者导出操作,那样的批量处理能给系统用户更好的操作体验,也升高了用户录入数据的频率。我在较早时期的EasyUI的Web框架上,也介绍过通过Excel举行的数目导入导出操作,小说小说为《根据MVC4+EasyUI的Web开发框架经验统计(10)–在Web界面上落到实处数据的导入和导出》,本文基于Bootstrap的框架基础上,再对那几个模块举办更新处理,以及Office文档或者图片等附件的查阅处理。

1、数据的导入操作

 一般系统模块里面,都有多少导入和导出操作,由此在界面自动生成的时候,我都赞同于给用户自动生成这么些专业的查询、导入、导出等操作效能,界面效果如下所示。

图片 1

导入操作,在Bootstrap框架之中,我把它看做一个层的,都合并放在index.cshtml文件之中,那样可以使得整个界面的处理尤其严刻一点,示例代码如下所示。

下边那个代码一般处境下,都是自动生成的,包含所需的总体字段,大家一般是基于须要展开字段的剪裁,以适应大家的政工和骨子里须求。

<!--导入数据操作层-->
<div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">文件导入</h4>
            </div>
            <div class="modal-body">
                <div style="text-align:right;padding:5px">
                    <a href="~/Content/Template/User-模板.xls" onclick="javascript:Preview();">
                        <img alt="测试用户信息-模板" src="~/Contentico_excel.png" />
                        User-模板.xls
                    </a>
                </div>
                <hr/>
                <form id="ffImport" method="post">
                    <div title="Excel导入操作" style="padding: 5px" data-options="iconCls:'icon-key'">
                        <input class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" />    
                        <input id="file_upload" name="file_upload" type="file" multiple="multiple">                    
                        <a href="javascript:;" class="btn btn-primary" id="btnUpload" onclick="javascript: $('#file_upload').uploadify('upload', '*')">上传</a>
                        <a href="javascript:;" class="btn btn-default" id="btnCancelUpload" onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>

                        <div id="fileQueue" class="fileQueue"></div>
                        <br />                    
                        <hr style="width:98%" />                    
                        <div id="div_files"></div>
                        <br />                    
                    </div>
                </form>

                <!--数据显示表格-->
                <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                    <thead id="gridImport_head">
                        <tr>
                            <th class="table-checkbox" style="width:40px"><input class="group-checkable" type="checkbox" onclick="selectAll(this)"></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 id="gridImport_body"></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="SaveImport()">保存</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文件了,因而须求对这一个文件的格式举办处理,即使格式正确,那么大家把多少呈现出来,供导入用户展开记录的抉择,决定导入这么些记录即可。

图片 2

拍卖检查Excel数据格式的代码如下所示。

                    //提示用户Excel格式是否正常,如果正常加载数据
                    $.ajax({
                        url: '/User/CheckExcelColumns?guid=' + guid,
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            if (data.Success) {
                                InitGrid(); //重新刷新表格数据
                                showToast("文件已上传,数据加载完毕!");
                            }
                            else {
                                showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error");
                            }
                        }
                    });

我们就是在后台扩充一个CheckExcelColumns的不二法门,用来检查Excel文件的字段格式的,唯有切合格式要求的公文,才被获取数据并出示在界面上。

体现在界面上的JS代码,也就是至关首要把Excel文件的内容提取出来,并绑定在Table元素上即可。

        //根据条件查询并绑定结果
        function InitGrid() {
            var guid = $("#AttachGUID").val();
            var url = "/User/GetExcelData?guid=" + guid;
            $.getJSON(url, function (data) {
                $("#gridImport_body").html("");

                $.each(data.rows, function (i, item) {
                    var tr = "<tr>";
                    tr += "<td><input class='checkboxes' type=\"checkbox\" name=\"checkbox\" ></td>";
                    tr += "<td>" + item.HandNo + "</td>";
                    tr += "<td>" + item.Name + "</td>";
                    tr += "<td>" + item.FullName + "</td>";   
                    tr += "<td>" + item.Title + "</td>";
                    tr += "<td>" + item.MobilePhone + "</td>";
                    tr += "<td>" + item.OfficePhone + "</td>";
                    tr += "<td>" + item.Email + "</td>";
                    tr += "<td>" + item.Gender + "</td>";
                    tr += "<td>" + item.QQ + "</td>";
                    tr += "<td>" + item.Note + "</td>";

                    tr += "</tr>";
                    $("#gridImport_body").append(tr);
                });
            });
        }

为了更进一步得到用户导入到具体的机关,那么大家还足以弹出一个对话框用然后选拔具体的新闻,最终才提交数据到后台举行处理。

图片 3

操作代码如下所示。

        //保存导入的数据
        function SaveImport() {
            //赋值给对象
            $("#Company_ID3").select2("val", @Session["Company_ID"]).trigger('change');
            $("#Dept_ID3").select2("val", @Session["Dept_ID"]).trigger('change');


            $("#selectDept").modal("show");
        }

那般大家肯定保存的时候,只必要通过Ajax把数量交到给后台处理即可,具体JS代码如下所示。

            $.ajax({
                url: '/User/SaveExcelData',
                type: 'post',
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                traditional: true,
                success: function (data) {
                    if (data.Success) {
                        //保存成功  1.关闭弹出层,2.清空记录显示 3.刷新主列表
                        showToast("保存成功");

                        $("#import").modal("hide");
                        $(bodyTag).html("");
                        Refresh();
                    }
                    else {
                        showToast("保存失败:" + data.ErrorMessage, "error");
                    }
                },
                data: postData
            });

Uploadify的处理在本人事先基于EasyUI的界面里面也有认证,有趣味可以参考《据悉MVC4+EasyUI的Web开发框架经验总计(10)–在Web界面上完毕数量的导入和导出》、《据悉MVC4+EasyUI的Web开发框架形成之旅–附件上传组件uploadify的施用》以及《Web开发中的文件上传组件uploadify的选择》。

 

2、数据的导出操作

 数据的导出操作相对相比较简单,一般景况下,大家把数据写入一个永恒的Excel表里面,然后提供URL给用户下载即可。

        //导出Excel数据
        function ShowExport() {
            var url = "/User/Export";
            var condition = $("#ffSearch").serialize();//获取条件

            executeExport(url, condition);//执行导出
        }

切实的逻辑代码如下所示

//执行导出操作,输出文件
function executeExport(url, condition) {
    $.ajax({
        type: "POST",
        url: url,
        data: condition,
        success: function (filePath) {
            var downUrl = '/FileUpload/DownloadFile?file=' + filePath;
            window.location = downUrl;
        }
    });
}

图片 4

 

3、附件的查看处理

 多数景况下,大家可能必要查阅上传的文件,包含Office文档、图片等足以开展预览的,是在卓殊,可以提供下载本地打开查看。

我在基于EasyUI的Web开发也介绍了Office的预览处理:《据悉MVC4+EasyUI的Web开发框架经验统计(8)–完成Office文档的预览》,这里大家革新一下即可兑现具体的Office预览和图纸查看功能了。

上篇文件介绍了Office的预览有三种途径,一种是运用微软Office的预览地址举办预览,一种是用控件生成HTML举办预览,二种能够组合使用,按照需求展开计划即可。

        /// <summary>
        /// 根据附件ID,获取对应查看的视图URL。
        /// 一般规则如果是图片文件,返回视图URL地址'/FileUpload/ViewAttach';
        /// 如果是Office文件(word、PPT、Excel)等,可以通过微软的在线查看地址进行查看:'http://view.officeapps.live.com/op/view.aspx?src=',
        /// 也可以进行本地生成HTML文件查看。如果是其他文件,可以直接下载地址。
        /// </summary>
        /// <param name="id">附件的ID</param>
        /// <returns></returns>
        public ActionResult GetAttachViewUrl(string id)
        {
            string viewUrl = "";
            FileUploadInfo info = BLLFactory<FileUpload>.Instance.FindByID(id);
            if (info != null)
            {
                string ext = info.FileExtend.Trim('.').ToLower();
                string filePath = GetFilePath(info);

                bool officeInternetView = false;//是否使用互联网在线预览
                string hostName = HttpUtility.UrlPathEncode("http://www.iqidi.com/");//可以配置一下,如果有必要

                if (ext == "xls" || ext == "xlsx" || ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx")
                {
                    if (officeInternetView)
                    {
                        //返回一个微软在线浏览Office的地址,需要加上互联网域名或者公网IP地址
                        viewUrl = string.Format("http://view.officeapps.live.com/op/view.aspx?src={0}{1}", hostName, filePath);
                    }
                    else
                    {
                        #region 动态第一次生成文件
                        //检查本地Office文件是否存在,如不存在,先生成文件,然后返回路径供查看
                        string webPath = string.Format("/GenerateFiles/Office/{0}.htm", info.ID);
                        string generateFilePath = Server.MapPath(webPath);
                        if (!FileUtil.FileIsExist(generateFilePath))
                        {
                            string templateFile = BLLFactory<FileUpload>.Instance.GetFilePath(info);
                            templateFile = Path.Combine(System.AppDomain.CurrentDomain.BaseDirectory, templateFile.Replace("\\", "/"));

                            if (ext == "doc" || ext == "docx")
                            {
                                Aspose.Words.Document doc = new Aspose.Words.Document(templateFile);
                                doc.Save(generateFilePath, Aspose.Words.SaveFormat.Html);
                            }
                            else if (ext == "xls" || ext == "xlsx")
                            {
                                Workbook workbook = new Workbook(templateFile);
                                workbook.Save(generateFilePath, SaveFormat.Html);
                            }
                            else if (ext == "ppt" || ext == "pptx")
                            {
                                templateFile = templateFile.Replace("/", "\\");
                                PresentationEx pres = new PresentationEx(templateFile);
                                pres.Save(generateFilePath, Aspose.Slides.Export.SaveFormat.Html);
                            }
                        }
                        #endregion
                        viewUrl = webPath;
                    }
                }
                else
                {
                    viewUrl = filePath;
                }
            }
            return Content(viewUrl);
        }

透过这些后台处理代码,大家得以正确明白Office预览的时候,使用的是哪位URL了。

这么在前者页面,大家只需求判定具体是那种文件,然后开展显示即可了。

        if(type =="image") {
            var imgContent = '<img src="'+ viewUrl + '" />';
            $("#divViewFile").html(imgContent);
            $("#file").modal("show");
        } else {
            $.ajax({
                type: 'GET',
                url: viewUrl,
                //async: false, //同步
                //dataType: 'json',
                success: function (json) {
                    $("#divViewFile").html(json);
                    $("#file").modal("show");
                },
                error: function (xhr, status, error) {
                    showError("操作失败" + xhr.responseText); //xhr.responseText
                }
            }); 
        }  

里面的代码

$("#file").modal("show");

是大家调用全局对话框,用来显示具体的始末的,效果如下所示。

图片 5

 

word文档预览效果如下所示:

图片 6

 或者大家查阅图片文件的时候,可以赢得界面效果如下所示:

图片 7

 图片 8

如上就是 数据的导入、导出及附件的查看处理的牵线内容,希望对大家学习有接济。

 

一旦有趣味,可以持续参照多重小说:

根据Metronic的Bootstrap开发框架经验总计(1)-框架总览及菜单模块的处理

根据Metronic的Bootstrap开发框架经验统计(2)–列表分页处理和插件JSTree的利用

依照Metronic的Bootstrap开发框架经验总计(3)–下拉列表Select2插件的运用

据悉Metronic的Bootstrap开发框架经验统计(4)–Bootstrap图标的提取和使用 

基于Metronic的Bootstrap开发框架经验计算(5)–Bootstrap文件上传插件File
Input的施用

基于Metronic的Bootstrap开发框架经验统计(6)–对话框及提醒框的处理和优化

依照Metronic的Bootstrap开发框架经验计算(7)–数据的导入、导出及附件的查看处理

依照Metronic的Bootstrap开发框架经验总计(8)–框架功能完全界面介绍

依据Metronic的Bootstrap开发框架经验总计(9)–完结Web页面内容的打印预览和保存操作

 

相关文章