2015-03-02 102 views
0

我正在使用table2excel插件,這將允許我將表格內容下載到excel文件。它第一次運行良好,但它只允許我每頁加載一次下載。jQuery事件將只運行一次

我已經嘗試將$("#export").click(function(){更改爲$("#export").on('click', function(){但這沒有奏效。該$( '#出口')點擊是準備一份文件

// click function on page 
$("#export").click(function(){ 
    $("#table2excel").table2excel({ 
    // exclude CSS class 
    exclude: ".noExl", 
    name: "Excel Document Name" 
    }); 
}); 

// external js file that gets called 
//table2excel.js 
;(function ($, window, document, undefined) { 
     var pluginName = "table2excel", 
       defaults = { 
       exclude: ".noExl", 
       name: "Table2Excel" 
     }; 

     // The actual plugin constructor 
     function Plugin (element, options) { 
       this.element = element; 
       // jQuery has an extend method which merges the contents of two or 
       // more objects, storing the result in the first object. The first object 
       // is generally empty as we don't want to alter the default options for 
       // future instances of the plugin 
       this.settings = $.extend({}, defaults, options); 
       this._defaults = defaults; 
       this._name = pluginName; 
       this.init(); 
     } 

     Plugin.prototype = { 
      init: function() { 
       var e = this; 
       e.template = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\"><head><!--[if gte mso 9]><xml>"; 
       e.template += "<x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions>"; 
       e.template += "<x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>"; 
       e.tableRows = ""; 

       // get contents of table except for exclude 
       $(e.element).find("tr").not(this.settings.exclude).each(function (i,o) { 
        e.tableRows += "<tr>" + $(o).html() + "</tr>"; 
       }); 
       this.tableToExcel(this.tableRows, this.settings.name); 
      }, 
      tableToExcel: function (table, name) { 
       var e = this; 
       e.uri = "data:application/vnd.ms-excel;base64,"; 
       e.base64 = function (s) { 
        return window.btoa(unescape(encodeURIComponent(s))); 
       }; 
       e.format = function (s, c) { 
        return s.replace(/{(\w+)}/g, function (m, p) { 
         return c[p]; 
        }); 
       }; 
       e.ctx = { 
        worksheet: name || "Worksheet", 
        table: table 
       }; 
       window.location.href = e.uri + e.base64(e.format(e.template, e.ctx)); 
      } 
     }; 

     $.fn[ pluginName ] = function (options) { 
       this.each(function() { 
         if (!$.data(this, "plugin_" + pluginName)) { 
           $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
         } 
       }); 

       // chain jQuery functions 
       return this; 
     }; 

})(jQuery, window, document); 
+0

被觸發後續點擊點擊回調(之後的第一次點擊)?你可以共享一個沙盒嗎? – peterdotjs 2015-03-02 17:23:05

+1

檢查控制檯錯誤;如果您的瀏覽器在運行某個函數時捕獲了一個,它將阻止任何後續調用運行。在Firefox或Chrome中,按'F12'打開開發工具,按'export'時檢查'console'標籤。 – 2015-03-02 17:23:12

+0

這裏是http://jsfiddle.net/puqxvrqu/ – 2015-03-02 17:29:59

回答

1

它只執行因爲在jquery插件該代碼塊的一次:

$.fn[ pluginName ] = function (options) { 
this.each(function() { 
    if (!$.data(this, "plugin_" + pluginName)) { 
     $.data(this, "plugin_" + pluginName, new Plugin(this, options)); 
    } 
}); 

// chain jQuery functions 
return this; 

};

$("#table2excel")僅初始化一次並跳過後續時間。

作了一些修改一些更改代碼:

$("button").click(function(){ 
    var $table = $('#table2excel'); 
    $table.removeData(); //data is removed, previous when data existed was preventing initialization of table2excel 
    $table.table2excel({ 
     exclude: ".noExl", 
     name: "Excel Document Name" 
    }); 
}); 

你可以看到它在這裏工作:http://jsfiddle.net/peterdotjs/bpLsrdy2/4/

0

其他內,則

$("#export").click(function(){ 
$("#table2excel").table2excel({ 
// exclude CSS class 
    exclude: ".noExl", 
    name: "Excel Document Name" 

}); });

如果第二次點擊它,你希望發生什麼不同?

您可能感覺到的僅僅是一次工作,是因爲它已經應用了更改,因此如果再次單擊該工作,則無法執行其他操作。

這是假設腳本經常沒有錯誤地進行的。如果出現錯誤,您可以通過在Chrome中按f12來檢查。在屏幕的右上角,您應該看看是否有錯誤。如果它正在運行,然後在點擊操作過程中失敗,這可能是您找到問題的根源。

+0

我看着它開火另一個excel文檔創建 – 2015-03-02 17:31:14

+0

還要注意,如果函數稍後依賴於另一個函數,JS腳本定期讀取。 – Shinerrs 2015-03-02 17:31:20

+0

您是否考慮過針對多次下載的瀏覽器保護?順便說一句在IE瀏覽器,並沒有迴應。 FYI – Shinerrs 2015-03-02 17:35:17