TableTools Export Excel前Table內容格式的轉換應用

風靈使發表於2018-04-11

我們做專案的時候,用DataTable外掛TableTools

頁面引用如下:

<script src="@Url.Content("~/Content/media/js/TableTools.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/media/css/TableTools.css")" rel="stylesheet" />

匯出Excel的格式:
這裡寫圖片描述

結果發現 Account# 那一列的格式是數字。 問題來了,如果Account# 的內容是 000001245678,那麼那一列將把00000取掉,在Excel中無論怎麼設定單元格列的格式,都不能將這一列還原出來,那麼這一列的值就失去了它本身的價值

解決方案一:

TableTools 匯出的Excelnotepad開啟,全選複製,然後新建一個Excel格式的檔案,貼上 就可以 完成這樣的需求。

缺點:使用者是上帝,這樣導致使用者操作3次,體驗差,下下策

解決方案二:

突破問題關鍵點: 查了各種資料,單純的Excel中,要想將0開頭的字串全部顯示出來 可以用(等號雙引號將要顯示的內容括起來) =“”

於是在TableTools匯出Excel之前,我需要將 Table特定列的值做一個處理,檢視官方TableTools資料,用了幾行程式碼就處理了,具體看程式碼實現:

<script type="text/javascript">
    $(document).ready(function () {
        $("#RepPaymentTable").dataTable(
          {
              "bFilter": false,
              "bSort": true,
              "bInfo": false,
              "bPaginate": false,
              "bStateSave": false,
              "sDom": "t",
              "bJQueryUI": true,
              "aaSorting": [],
              "sDom": '<"H"Tfl>t<"F"ip>',
              "oTableTools": {
                  "sSwfPath": "@Url.Content("~/Content/media/swf/copy_csv_xls.swf")",
                  "aButtons": [
                  {
                      "sExtends": "xls",
                      "bFooter": false,
                      "fnCellRender": function (sValue, iColumn, nTr, iDataIndex) {

   if (iColumn === 2) {     

//此列就是Account# 對應要處理的形式,官方對fnCellRender的幾個從引數做了如下的解釋:  

//1.* - The value from the cell's data(本列對應的值)

//2.int - The column number being read(列號,經驗證,列號是從0開始的)

//3.node - The TR element for the row(本行物件)

//4.int - The internal DataTables cache index for the row (based on fnGetPosition)(該行的內部資料表快取索引(基於fnGetPosition ))

            if (sValue != ""){
                      return "=\"" + sValue + "\"";
                              }
              }
                          return sValue;
                      }
                  }
                  ],
              }
          });
    });
</script>

簡單記錄完畢

相關文章