基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理

更新時(shí)間：2016年05月12日 11:59:40 作者：伍華聰

在很多系統(tǒng)模塊里面，我們可能都需要進(jìn)行一定的數(shù)據(jù)交換處理，這樣可以很好的達(dá)到用戶操作體驗(yàn)感，接下來(lái)通過(guò)本文給大家介紹基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理相關(guān)知識(shí)，非常具有參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

在很多系統(tǒng)模塊里面，我們可能都需要進(jìn)行一定的數(shù)據(jù)交換處理，也就是數(shù)據(jù)的導(dǎo)入或者導(dǎo)出操作，這樣的批量處理能給系統(tǒng)用戶更好的操作體驗(yàn)，也提高了用戶錄入數(shù)據(jù)的效率。本文基于Bootstrap的框架基礎(chǔ)上，再對(duì)這個(gè)模塊進(jìn)行更新處理，以及Office文檔或者圖片等附件的查看處理。

1、數(shù)據(jù)的導(dǎo)入操作

一般系統(tǒng)模塊里面，都有數(shù)據(jù)導(dǎo)入和導(dǎo)出操作，因此在界面自動(dòng)生成的時(shí)候，我都傾向于給用戶自動(dòng)生成這些標(biāo)準(zhǔn)的查詢、導(dǎo)入、導(dǎo)出等操作功能，界面效果如下所示。

導(dǎo)入操作，在Bootstrap框架里面，我把它作為一個(gè)層的，都統(tǒng)一放在index.cshtml文件里面，這樣可以使得整個(gè)界面的處理更加緊密一點(diǎn)，示例代碼如下所示。

下面這些代碼一般情況下，都是自動(dòng)生成的，包括所需的全部字段，我們一般是根據(jù)需要進(jìn)行字段的裁剪，以適應(yīng)我們的業(yè)務(wù)和實(shí)際需要。

<!--導(dǎo)入數(shù)據(jù)操作層-->
<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">文件導(dǎo)入</h4>
      </div>
      <div class="modal-body">
        <div style="text-align:right;padding:5px">
          <a href="~/Content/Template/User-模板.xls" onclick="javascript:Preview();">
            <img alt="測(cè)試用戶信息-模板" src="~/Content/images/ico_excel.png" />
            <span style="font-size:larger;font-weight:200;color:red">User-模板.xls</span>
          </a>
        </div>
        <hr/>
        <form id="ffImport" method="post">
          <div title="Excel導(dǎo)入操作" 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>
        <!--數(shù)據(jù)顯示表格-->
        <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>真實(shí)姓名</th>
              <th>職務(wù)頭銜</th>
              <th>移動(dòng)電話</th>
              <th>辦公電話</th>
              <th>郵件地址</th>
              <th>性別</th>
              <th>QQ號(hào)碼</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">關(guān)閉</button>
        <button type="button" class="btn btn-primary" onclick="SaveImport()">保存</button>
      </div>
    </div>
  </div>
</div>

我們?nèi)绻@示導(dǎo)入操作界面，那么只需要把這個(gè)層顯示出來(lái)即可，如下腳本所示。

//顯示導(dǎo)入界面
    function ShowImport() {
      $("#import").modal("show");
    }

這里的文件上傳處理，主要使用了Uploadify的這個(gè)控件進(jìn)行處理的，當(dāng)然也可以利用我前面介紹過(guò)的File Input上傳控件進(jìn)行處理，都可以很好實(shí)現(xiàn)這些導(dǎo)入操作。

一般情況下的Uploadify控件的初始化代碼如下所示

$(function () {
      //添加界面的附件管理
      $('#file_upload').uploadify({
        'swf': '/Content/JQueryTools/uploadify/uploadify.swf', //FLash文件路徑
        'buttonText': '瀏 覽',                 //按鈕文本
        'uploader': '/FileUpload/Upload',            //處理上傳的頁(yè)面
        'queueID': 'fileQueue',             //隊(duì)列的ID
        'queueSizeLimit': 1,              //隊(duì)列最多可上傳文件數(shù)量，默認(rèn)為999
        'auto': false,                 //選擇文件后是否自動(dòng)上傳，默認(rèn)為true
        'multi': false,                 //是否為多選，默認(rèn)為true
        'removeCompleted': true,            //是否完成后移除序列，默認(rèn)為true
        'fileSizeLimit': '10MB',            //單個(gè)文件大小，0為無(wú)限制，可接受KB,MB,GB等單位的字符串值
        'fileTypeDesc': 'Excel Files',         //文件描述
        'fileTypeExts': '*.xls',            //上傳的文件后綴過(guò)濾器
        'onQueueComplete': function (event, data) {   //所有隊(duì)列完成后事件
          //業(yè)務(wù)處理代碼
          //提示用戶Excel格式是否正常，如果正常加載數(shù)據(jù)
        },
        'onUploadStart': function (file) {
          InitUpFile();//上傳文件前 ，重置GUID，每次不同
          $("#file_upload").uploadify("settings", 'formData', { 'folder': '數(shù)據(jù)導(dǎo)入文件', 'guid': $("#AttachGUID").val() }); //動(dòng)態(tài)傳參數(shù)
        },
        'onUploadError': function (event, queueId, fileObj, errorObj) {
          //alert(errorObj.type + "：" + errorObj.info);
        }
      });
    });

關(guān)鍵的邏輯就是：

//業(yè)務(wù)處理代碼

一般情況下，我們?cè)谶@里已經(jīng)在服務(wù)器里面獲得了Excel文件了，因此需要對(duì)這個(gè)文件的格式進(jìn)行處理，如果格式正確，那么我們把數(shù)據(jù)顯示出來(lái)，供導(dǎo)入用戶進(jìn)行記錄的選擇，決定導(dǎo)入那些記錄即可。

處理檢查Excel數(shù)據(jù)格式的代碼如下所示。

  //提示用戶Excel格式是否正常，如果正常加載數(shù)據(jù)
          $.ajax({
            url: '/User/CheckExcelColumns?guid=' + guid,
            type: 'get',
            dataType: 'json',
            success: function (data) {
              if (data.Success) {
                InitGrid(); //重新刷新表格數(shù)據(jù)
                showToast("文件已上傳，數(shù)據(jù)加載完畢！");
              }
              else {
                showToast("上傳的Excel文件檢查不通過(guò)。請(qǐng)根據(jù)頁(yè)面右上角的Excel模板格式進(jìn)行數(shù)據(jù)錄入。", "error");
              }
            }
          });

我們就是在后臺(tái)增加一個(gè)CheckExcelColumns的方法，用來(lái)檢查Excel文件的字段格式的，只有符合格式要求的文件，才被獲取數(shù)據(jù)并顯示在界面上。

顯示在界面上的JS代碼，也就是主要把Excel文件的內(nèi)容提取出來(lái)，并綁定在Table元素上即可。

//根據(jù)條件查詢并綁定結(jié)果
    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);
        });
      });
    }

為了更進(jìn)一步獲取用戶導(dǎo)入到具體的部門，那么我們還可以彈出一個(gè)對(duì)話框用然后選擇具體的信息，最后才提交數(shù)據(jù)到后臺(tái)進(jìn)行處理。

操作代碼如下所示。

//保存導(dǎo)入的數(shù)據(jù)
    function SaveImport() {
      //賦值給對(duì)象
      $("#Company_ID3").select2("val", @Session["Company_ID"]).trigger('change');
      $("#Dept_ID3").select2("val", @Session["Dept_ID"]).trigger('change');
      $("#selectDept").modal("show");
    }

這樣我們確認(rèn)保存的時(shí)候，只需要通過(guò)Ajax把數(shù)據(jù)提交給后臺(tái)處理即可，具體JS代碼如下所示。

 $.ajax({
        url: '/User/SaveExcelData',
        type: 'post',
        dataType: 'json',
        contentType: 'application/json;charset=utf-8',
        traditional: true,
        success: function (data) {
          if (data.Success) {
            //保存成功 1.關(guān)閉彈出層，2.清空記錄顯示 3.刷新主列表
            showToast("保存成功");
            $("#import").modal("hide");
            $(bodyTag).html("");
            Refresh();
          }
          else {
            showToast("保存失敗:" + data.ErrorMessage, "error");
          }
        },
        data: postData
      });

2、數(shù)據(jù)的導(dǎo)出操作

數(shù)據(jù)的導(dǎo)出操作相對(duì)比較簡(jiǎn)單，一般情況下，我們把數(shù)據(jù)寫入一個(gè)固定的Excel表里面，然后提供URL給用戶下載即可。

 //導(dǎo)出Excel數(shù)據(jù)
    function ShowExport() {
      var url = "/User/Export";
      var condition = $("#ffSearch").serialize();//獲取條件
      executeExport(url, condition);//執(zhí)行導(dǎo)出
    }

具體的邏輯代碼如下所示

//執(zhí)行導(dǎo)出操作，輸出文件
function executeExport(url, condition) {
  $.ajax({
    type: "POST",
    url: url,
    data: condition,
    success: function (filePath) {
      var downUrl = '/FileUpload/DownloadFile?file=' + filePath;
      window.location = downUrl;
    }
  });
}

3、附件的查看處理

多數(shù)情況下，我們可能需要查看上傳的文件，包括Office文檔、圖片等可以進(jìn)行預(yù)覽的，是在不行，可以提供下載本地打開(kāi)查看。

上篇文件介紹了Office的預(yù)覽有兩種途徑，一種是利用微軟Office的預(yù)覽地址進(jìn)行預(yù)覽，一種是用控件生成HTML進(jìn)行預(yù)覽，兩種可以結(jié)合使用，根據(jù)需要進(jìn)行配置即可。

/// <summary>
    /// 根據(jù)附件ID，獲取對(duì)應(yīng)查看的視圖URL。
    /// 一般規(guī)則如果是圖片文件，返回視圖URL地址'/FileUpload/ViewAttach'；
    /// 如果是Office文件（word、PPT、Excel）等，可以通過(guò)微軟的在線查看地址進(jìn)行查看：'http://view.officeapps.live.com/op/view.aspx?src='，
    /// 也可以進(jìn)行本地生成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;//是否使用互聯(lián)網(wǎng)在線預(yù)覽
        string hostName = HttpUtility.UrlPathEncode("http://www.iqidi.com/");//可以配置一下，如果有必要
        if (ext == "xls" || ext == "xlsx" || ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx")
        {
          if (officeInternetView)
          {
            //返回一個(gè)微軟在線瀏覽Office的地址，需要加上互聯(lián)網(wǎng)域名或者公網(wǎng)IP地址
            viewUrl = string.Format("http://view.officeapps.live.com/op/view.aspx?src={0}{1}", hostName, filePath);
          }
          else
          {
            #region 動(dòng)態(tài)第一次生成文件
            //檢查本地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);
    }

通過(guò)這個(gè)后臺(tái)處理代碼，我們可以正確知道Office預(yù)覽的時(shí)候，使用的是哪個(gè)URL了。

這樣在前端頁(yè)面，我們只需要判斷具體是那種文件，然后進(jìn)行展示即可了。

 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");

是我們調(diào)用全局對(duì)話框，用來(lái)展示具體的內(nèi)容的，效果如下所示。

word文檔預(yù)覽效果如下所示：

或者我們查看圖片文件的時(shí)候，可以獲得界面效果如下所示:

以上就是小編給大家介紹的基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【七】數(shù)據(jù)的導(dǎo)入、導(dǎo)出及附件的查看處理的相關(guān)內(nèi)容，希望對(duì)大家有所幫助，如果大家想了解更多資訊敬請(qǐng)關(guān)注腳本之家網(wǎng)站，在此小編非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: