Избегайте привязки нескольких событий к элементу - PullRequest
0 голосов
/ 15 февраля 2019

Я загружаю cshtml в свой проект .net через ajax, после того, как успешно связал данные с dom, инициализирую данные на нем с возможностью экспорта в Excel,

, но когда вы выбираете данные более чем раз (пользовательиспользуя файлеры), datatable является обязательным (добавляющим) событием для кнопки экспорта каждый раз, и пользователь заканчивает тем, что загружает сразу несколько файлов Excel.

Я повторил метод cshtml и ajax с data иgetCSHTML методов.

Действия по воспроизведению проблемы.

  1. Нажмите кнопку Получить данные .
  2. Нажмите Экспорт данныхКнопка (будет загружен только один файл).
  3. Вернитесь к шагу 1 и 2, повторите его, не обновляя вкладку браузера, в итоге вы скачаете несколько файлов Excel одним щелчком мыши.

Я пробовал, .off(), .unbind() и .bind(), но без помощи.

var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'

function getCSHTML() {
  $("#masterPage").html(data);

  $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "initComplete": function() {
      var $buttons = $('.dt-buttons').hide();
      if ($('#exportLink').length > 0) {
        $('#exportLink').on('change', function() {
          var btnClass = $(this).find(":selected")[0].id ?
            '.buttons-' + $(this).find(":selected")[0].id :
            null;
          if (btnClass) $buttons.find(btnClass).click();
        })
      }
      $('#exportToExcel').on('click', function() {
        $('.buttons-excel').click()
      })
    },
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>

<div id="masterPage"></div>

Ответы [ 2 ]

0 голосов
/ 15 февраля 2019

Попробуйте переместить функцию экспорта за пределы initComplete, она работает как шарм

0 голосов
/ 15 февраля 2019

Вам нужно отменить привязку в начале вашей функции с этой строкой

$("#exportToExcel").unbind("click")

Пример:

var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'

function getCSHTML() {
  $("#masterPage").html(data);

  $("#exportToExcel").unbind("click"); // unbind here

  $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "initComplete": function() {
      var $buttons = $('.dt-buttons').hide();
      if ($('#exportLink').length > 0) {
        $('#exportLink').on('change', function(e) {
          var btnClass = $(this).find(":selected")[0].id ?
            '.buttons-' + $(this).find(":selected")[0].id :
            null;
          if (btnClass) $buttons.find(btnClass).click();
        })
      }
      $('#exportToExcel').on('click', function(e) {
        $('.buttons-excel').click()
      })
    },
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>

<div id="masterPage"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...