这是一个新问题，但涉及to this question。简而言之，我现在能够将生成的表中的单元格复制到剪贴板。我现在想做的是使用相同的按钮向剪贴板添加更多文本。我尝试使用命令式API作为docs建议，但我仍然只能复制原始目标。如何使用clipboard.js复制多个元素，只需单击一下按钮？
我的代码：
<script>
var place_id = ''; //addme
var startDate = '{{request.GET.start_date}}';//addmee
var endDate = '{{request.GET.end_date}}';//addmee
var clipboard = new Clipboard('.cp_btn',{
text: function(trigger) {
var toCopy = document.querySelector('#toCopy').value;
var dateCopy = document.querySelector('#dateCopy').value;
var errorCopy = document.querySelector('#errorCopy').value;
return toCopy + dateCopy + errorCopy;
}
});
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() {
var start = moment(startDate);
var end = moment(endDate);
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
init();
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
function clearString(str){
var str = str.replace(/\"/g, "");
return str;
}
function csvToTable(myReturn){
var cellToCopyIndex = 0;
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>' +
'<button class="cb_btn" data-clipboard-target="#toCopy_'+singleRow+'"' +
'style="color:#60B7BA;\n' +
' font-size: 20px;\n' +
' margin-top: 0;\n' +
' padding-top: 11px;">View Logs';
table += '</button></td>';
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();
new Clipboard('.cb_btn');
}
else {
jQuery(domElement).html(response.response.replace(/\"/g,""));
}
}
if(response.error){
}
else{
}
},
error:function(response){
}
});
}
}
function init() {
showLogData('globallogs_places', '#returngloballogsplaces', true);
}
</script>
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" /> <!--addme -->
{% 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><!--addme-->
<!-- 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><!--addme -->
<!--<script type="text/javascript" src="/static/js/logs.js?rand=9"></script><!--addme -->
<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 %}
<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>
<span></span> <b class="caret"></b>
</div>
<br>
<h3>Errors:</h3>
<br>
<br>
<div id="returngloballogsplaces" align="left"></div>
<div>
<input type="hidden" id="dateCopy" data-clipboard-target="{{request.GET.end_date}}" value="{{request.GET.end_date}}" >
</div>
<div>
<input type="hidden" id="errorCopy" data-clipboard-target="httpRequest.status>=300 httpRequest.status<=499" value="httpRequest.status>=300 httpRequest.status<=499" >
</div>
<br>
<br>
<br>
{% endblock %}