我有一个包含db:
变量的表<table id="itemall2" class="itemall" border="1">
<thead>
<tr><th></th>
<th><?= $lang['quantity']; ?></th>
<th><?= $lang['article']; ?></th>
<th><?= $lang['desc']; ?></th>
<th><?= $lang['weight']; ?> (Kg)</th>
<th><?= $lang['price']; ?> (Kč)</th>
<th><?= $lang['cat_id']; ?></th>
<th><?= $lang['cat_name']; ?></th></tr>
</thead>
<tbody>
<?php foreach ($this->items as $value) : ?>
<tr><td><input type="checkbox" name="checked[]" value="<?= $value['id_item']?>" onclick="enableName(this, 'quantity<?= $value['id_item']?>');"/></td>
<td><input type="number" class="quantity<?= $value['id_item']?>" name="quantity[]" disabled></td>
<td><?= $value['id_item']?></td>
<td><?= $value[$en] ?></td>
<td><?= $value['weight'] ?></td>
<td><?= $value['price'] ?></td>
<td><?= $value['code'] ?></td>
<td><?= $value['name'] ?></td>
</tr>
<?php endforeach; ?>
<input type="hidden" name="id_warehouse" type="text" value="<?= $this->id_warehouse ?>">
</tbody>
</table>
我有一个按钮,点击后将表格转换为Excel格式并将其保存到磁盘:
<input type="button" onclick="tableToExcel('itemall2', 'W3C Example Table')" value="<?= $lang['export']; ?>">
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, 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><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})();
问题是,使用此函数将表中的某些单元格与rowspans和colspans合并在一起:
function MergeCommonRows(table) {
var firstColumnBrakes = [];
// iterate through the columns instead of passing each column as function parameter:
for(var i=1; i<=table.find('th').length; i++){
var previous = null, cellToExtend = null, rowspan = 1;
table.find("td:nth-child(" + i + ")").each(function(index, e){
var jthis = $(this), content = jthis.text();
// check if current row "break" exist in the array. If not, then extend rowspan:
if (previous == content && content !== "" && $.inArray(index, firstColumnBrakes) === -1) {
// hide the row instead of remove(), so the DOM index won't "move" inside loop.
jthis.addClass('hidden');
cellToExtend.attr("rowspan", (rowspan = rowspan+1));
}else{
// store row breaks only for the first column:
if(i === 1) firstColumnBrakes.push(index);
rowspan = 1;
previous = content;
cellToExtend = jthis;
}
});
}
// now remove hidden td's (or leave them hidden if you wish):
$('td.hidden').hide();
}
因为我没有使用remove()从表中删除重复单元格,但是我用hide()隐藏了它们,导出的表格被破坏了。它正确导出合并的单元格,但它也会打印完全打破表格的隐藏单元格。我无法删除()单元格,因为我将它们用于其他事情,所以有没有办法告诉导出脚本导出表格,因为它没有合并?
答案 0 :(得分:1)
您可以像这样修改tableToExcel函数
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, 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><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table);
// clone the table
var modifiedTable = $('<table/>').html(table.innerHTML);
// remove elements from the clone
modifiedTable.find('.hidden').remove();
// get the modified html
var ctx = {worksheet: name || 'Worksheet', table: modifiedTable.html()}
window.location.href = uri + base64(format(template, ctx))
}
})();
克隆并删除样本https://jsfiddle.net/yqwk2d0a/
这不会修改原始表
答案 1 :(得分:0)
这是jQuery方式做同样的事情,Crisim II Numenoreano做了+感谢他为我用来测试下面的代码的小提琴:
var clonedTable = $('#test').clone();
clonedTable.find('.hidden').remove();