将列添加到由CSV生成的JQuery函数生成的表

时间：2018-01-06 20:17:51

标签： jquery html

我有一个jquery函数，它从csv文件中呈现一个html表。我想在此表中添加一列，其中包含每行的按钮。该按钮需要将行中的某些单元格复制到剪贴板。

csv是通过ajax调用生成的，因此行不是静态的。按钮行应该等于csv中的行。如何添加此列？

我正在使用clipboard.js库，但我不知道从哪里开始。我知道需要复制的文本应该是id'ed，所以库知道要复制什么但是如何将id添加到单元格中的行？任何建议将不胜感激。

jquery函数logs.js：

function clearString(str){
   var str = str.replace(/\"/g, "");
   return str;
  }
  function csvToTable(myReturn){
    var allRows = myReturn.split(/\r?\n|\r/);
    var table = '<table class="tablesorter">';
    for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
      if (singleRow === 0) {
        table += '<thead>';
        table += '<tr>';
      } else {
        table += '<tr>';
      }
      var rowCells = allRows[singleRow].split(',');
      for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
        if (singleRow === 0) {
          table += '<th style="padding: 15px;">';
          table += clearString(rowCells[rowCell]);
          table += '</th>';
        } else {
          table += '<td>';
          table += clearString(rowCells[rowCell]);
          table += '</td>';
        }
      }
      if (singleRow === 0) {
        table += '</tr>';
        table += '</thead>';
        table += '<tbody>';
      } else {
        table += '</tr>';
      }
    }
    table += '</tbody>';
    table += '</table>';
    return table;
  }
  function showLogData(name, domElement, csv){
    csv = csv || false;

    var selStatus = jQuery('#txtselstatus').val();
    jQuery('#returndatalog').css('display', 'none');
    if (selStatus == "")
    {
      alert("Please enter status")
      jQuery('#txtselstatus').focus();
    }else
    {
      jQuery(domElement).html("<img src='/static/img/loader.gif'/>");
      jQuery.ajax({
        type: "POST",
        url: '/ajax/generatelogdata',
        dataType: 'json',
        data: {
            "chkstatus":"",
            'place_id': place_id,
            'queryname': name,
            'startDate': $("#reportrange").data('daterangepicker').startDate.format("YYYY-MM-DD"),
            'endDate': $("#reportrange").data('daterangepicker').endDate.format("YYYY-MM-DD")
        },
        success: function(response){
          ///console.log(response)
           jQuery('#returndatalog').css('display', 'block');

          if(typeof response =='object')
          {
            var myReturn = response.response;
            if (csv) {
                jQuery(domElement).html(csvToTable(myReturn));
                jQuery(domElement + " table").tablesorter();
            }
            else {
                jQuery(domElement).html(response.response.replace(/\"/g,""));
            }
          }
          if(response.error){

          }
          else{

          }
        },
        error:function(response){

        }
      });
    }
  }

HTML：

{% block css_includes %}
<link rel="stylesheet" href="/static/css/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="/static/css/tablesorter/style.css?rand=1" type="text/css" />
{% endblock %}
{% block js_includes %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/static/js/admin_stats.js?v={{version}}"></script>
<script src="/static/js/jquery-ui.js" type="text/javascript"></script>
<script  type="text/javascript"  src="/static/js/admin.js?v={{version}}"></script>
<script src="/static/js/handlebars.min-v1.1.2.js" type="text/javascript"></script>
<script  type="text/javascript"  src="/static/js/clipboard.min.js"></script>
<!-- datepicker add -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script  type="text/javascript"  src="/static/js/jq.tablesorter.js"></script>
<script  type="text/javascript"  src="/static/js/logs.js?rand=9"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
{% endblock %}
{% block body %}
{% include "csr_header.html" %}
<!--Styles-->


    <!--Scripts-->
<script>
var place_id = ''; 
var startDate = '{{request.GET.start_date}}';
var endDate = '{{request.GET.end_date}}';

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

function init() {
    showLogData('globallogs_places', '#returngloballogsplaces', true);
}
</script>
<br>
<h3>Select a Date</h3>
<br>
<div id="reportrange" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 23%">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
    <span></span> <b class="caret"></b>
</div>
<br>
<h3>Errors: Places</h3>
<div class="pull-right">
<a href="https://console.cloud.google.com/logs/viewer?" style="color:#60B7BA;
    font-size: 20px;
    margin-top: 0;
    padding-top: 11px;">View Logs</a>
</div>
<br>
<br>
<div id="returngloballogsplaces" align="left"></div>
<br>
<br>
<br>
{% endblock %}

2 个答案:

答案 0 :(得分：3)

clipboard.js插件关注绑定＆＃34;要复制的内容＆＃34;使用data-clipboard-target属性的按钮。因此，id必须内联定义。

您可以使用表创建循环中使用id索引生成的唯一singleRow来执行此操作。

现在，要复制的内容必须是input ...而不是td，因为剪贴板会使用值来复制要复制的文本......不是内部HTML。

您可以设置输入样式，使其看起来不像输入！使用id的开头来设置样式。它在我建议的生成标记中被禁用。

input[id^='toCopy']{
  border:0;
  outline:0;
}

然后，您只需要在按钮类上实例化插件。在这里，我强烈建议你使用一个没有机会在其他地方使用过的类。在他们的文档中，他们建议.btn ......但这太常见了。我建议.cb_btn（cb在剪贴板中）。

以下是您修改的csvToTable功能。
请注意您必须检查的cellToCopyIndex索引。它必须是与您要复制的列对应的从零开始的整数。

function csvToTable(myReturn){

  var cellToCopyIndex = 2;  // The index of the cell to be copied, zero based

  var allRows = myReturn.split(/\r?\n|\r/);
  var table = '<table class="tablesorter">';
  for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
    if (singleRow === 0) {
      table += '<thead>';
      table += '<tr>';
    } else {
      table += '<tr>';
    }
    var rowCells = allRows[singleRow].split(',');
    for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
      if (singleRow === 0) {
        table += '<th style="padding: 15px;">';
        table += clearString(rowCells[rowCell]);
        table += '</th>';
      } else {
        table += '<td>';
        if(rowCell==cellToCopyIndex){
          table += '<input type="text" id="toCopy_'+singleRow+'" value="'+clearString(rowCells[rowCell])+'" readonly>';
        }else{
          table += clearString(rowCells[rowCell]);
        }
        table += '</td>';
      }
    }
    if (singleRow === 0) {
      table += '</tr>';
      table += '</thead>';
      table += '<tbody>';
    } else {
      table += '</td><td><button class="cb_btn" data-clipboard-target="#toCopy_'+singleRow+'"><img src="assets/clippy.svg" alt="Copy to clipboard"></button></td></tr>';
    }
  }
  table += '</tbody>';
  table += '</table>';
  return table;
}

要实例化插件，请在创建表时执行此操作...这是在Ajax成功回调中：

success: function(response){
  ///console.log(response)
   jQuery('#returndatalog').css('display', 'block');

  if(typeof response =='object')
  {
    var myReturn = response.response;
    if (csv) {
        jQuery(domElement).html(csvToTable(myReturn));
        jQuery(domElement + " table").tablesorter();
        new Clipboard('.cb_btn');                       // Instantiate Clipboard here.
    }
    else {
        jQuery(domElement).html(response.response.replace(/\"/g,""));
    }
  }
  if(response.error){

  }
  else{

  }
},

免责声明：完全未经测试!! ;）

答案 1 :(得分：1)

我添加了一个图片，指出代码中的位置：

  • 行开始|如果你真的需要它，这是一个很好的地方......
  • 行结束|您可以在此处添加一个带有按钮的单元格。

我想我不会添加ID ...我会检测按钮点击的正确父元素并从那里开始。

A pic of your code with some arrows added...

相关问题
最新问题