mvc4 強大的導出和不需要上傳文件的批量導入EXCEL--SNF快速開發平台3.1

本文轉載自查看原文 2015-01-22 10:29 2113 導入/ Excel/ 導出/ [00]快速開發平台系統

數據的導入導出，在很多系統里面都比較常見，這個導入導出的操作，在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進行了格式化如下

確認數據沒有問題后，點擊保存導入數據成功后如下提示：

導入模版：

2、Web數據導入的處理邏輯和代碼

為了實現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>