Функция кнопки не работает, когда на подстранице - PullRequest
Новая
       2

Функция кнопки не работает, когда на подстранице

0 голосов
/ 03 октября 2018

У меня есть функция, с помощью которой я могу загрузить свои данные таблицы в csv.Но функция кнопки работает только тогда, когда я размещаю ее на своей странице index.html, а моя таблица - на странице subpage.html.Но каким-то образом моя кнопка на странице индекса может загружать данные моей таблицы в этот файл subpage.html при переходе туда.

Index.html: кнопка здесь работает 

      <body>
      <header ng-include="'views/header.html'"></header>
      <main ng-view></main>
      <button type="button" id="btnDownload"> Download as CSV</button>
      </body>

Subpage.html: если я размещу здесь кнопку, она не будет работать 

      <div>
          <table id="tabletodownload" ng-show="auditoriums === 'none'" style="border:1px solid #000;">

                  <tr> <th> Customer Name </th> <th> Order Value </th> <th> Ordered On </th> </tr>

                  <tr ng-repeat="audit in auditoriums| limitTo: 1 - auditoriums.length">
                    <td>{{audit.NAME}}</td>
                    <td>{{audit.ADDRESSBLOCKHOUSENUMBER}}</td>
                    <td>{{audit.ADDRESSPOSTALCODE}}</td>
                    <td>{{audit.ADDRESSSTREETNAME}}</td>
                  </tr>

          </table>
          <br />
      </div>
      <button type="button" id="btnDownload"> Download as CSV</button>

Javascript код для DL to csv: 

      $(function() {
       $('#btnDownload').click(function() {
               $("#tabletodownload").tableToCSV({
                   filename: 'CustomerList'
               });
           });
      });

      jQuery.fn.tableToCSV = function (options) {
          var settings = $.extend({
              filename: ""
          }, options);
          var clean_text = function (text) {
              text = $.trim(text.replace(/"/g, '""'));
              return '"' + text + '"';
          };
          $(this).each(function () {
              var table = $(this);
              var caption = settings.filename;
              var title = [];
              var rows = [];
              $(this).find('tr').each(function () {
                  var data = [];
                  $(this).find('th').each(function () {
                      var text = clean_text($(this).text());
                      title.push(text);
                  });
                  $(this).find('td').each(function () {
                      var text = clean_text($(this).text());
                      data.push(text);
                  });
                  data = data.join(",");
                  rows.push(data);
              });
              title = title.join(",");
              rows = rows.join("\n");
              var csv = title + rows;
              var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
              var download_link = document.createElement('a');
              download_link.href = uri;
              var ts = new Date().getTime();
              if (caption == "") {
                  download_link.download = ts + ".csv";
              } else {
                  download_link.download = caption + "-" + ts + ".csv";
              }
              document.body.appendChild(download_link);
              download_link.click();
              document.body.removeChild(download_link);
          });
      };

1 Ответ

0 голосов
/ 03 октября 2018

Если index.html и subpage.html - это две разные страницы (а не шаблон angularjs или что-то в этом роде), то, вероятно, потому, что код, который обрабатывает нажатие кнопки, а остальная часть вашей функции не существует вsubpage.html.

быстрая и грязная

Я предполагаю, что вы не используете никаких инструментов сборки.Самый простой способ - переместить функцию кнопки в тег скрипта внутри subpage.html

angularjs way

Я вижу, вы используете angularjs в проекте.Прикрепление четных списков вручную, например, нажатием кнопки, - не самый лучший способ сделать это.Вы можете легко переместить функциональность в свой угловой контроллер, управляющий этой страницей, и добавить атрибут ng-click к кнопке, которая вызывает эту функцию.Таким образом, вы позволяете фреймворку решать, когда и hpw подключить прослушиватель события click, а не управлять им самостоятельно.

Кстати ... Использование каркаса типа angular / реагировать / vue большую часть времени делает ненужным использование jQuery.В этом случае вы также можете использовать библиотеку, созданную для amgularjs, для создания CSV из таблицы.jQuery - это очень DOM способ мышления, в то время как angular - это скорее DATA способ мышления.По моему мнению, именно поэтому лучше не смешивать эти вещи.

Это может помочь вам: https://github.com/kollavarsham/ng-table-to-csv

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...