如何解决jQuery,如果excel单元格值是负数,则颜色为红色
我正在使用Datatables库来呈现HTML表,并在单击按钮时输出一个excel文档。这是我目前拥有的代码:
$(document).ready( function () {
$('#mainTable').DataTable({
fixedHeader: false,dom: 'Bfrtip',buttons: [
{
extend: 'copy',exportOptions: {
columns: ':not(:first-child)',rows: ':visible'
}
},{
extend: 'excelHtml5',title: 'Profit and Loss Report',messageTop: `Ran on ${(new Date()).toLocaleString()} for period <xsl:value-of select="P_PERIOD_NUM"/> - FY<xsl:value-of select="P_PERIOD_YEAR"/>`,messageBottom: `Companies: <xsl:value-of select="P_COMP_CHILD"/> Cost Centers: <xsl:value-of select="P_CC_CHILD_1"/><xsl:value-of select="P_CC_CHILD_2"/>`,// Function iterates over each row and applies styling if conditions are met
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var rows = $('row:gt(2)',sheet);
rows.each(function () {
// bold all rows where first cell ends with : (totals,% or revs)
if ($('c:first-of-type is t',this).text().endsWith(':')) {$('c',this).attr('s','2');}
// highlight red all rows that start with - (negative numbers)
$('c',this).each(function() {
if ($('v',this).text().startsWith('-')) {
$(this).attr('s','11');
}
});
});
}
},{
extend: 'pdfHtml5',orientation: 'landscape',pageSize: 'LEGAL',messageBottom: `Companies: <xsl:value-of select="P_COMP_CHILD"/> Cost Centers: <xsl:value-of select="P_CC_CHILD_1"/><xsl:value-of select="P_CC_CHILD_2"/>`
}
],"ordering": false,paging: false
});
如您所见,我有一个遍历excel文件每一行的函数。第一个if语句在第一个单元格字符串的末尾查找“:”。求和行使用此字符,因此将其加粗。
但是,我遇到的问题是这段代码:
if ($('v',this).text().startsWith('-')) {
$(this).attr('s','11');
}
if语句按预期工作;它选择以-(负数)开头的每个单元格。 if语句的主体是问题所在。我想使用红色字体显示负数。值“ 11”的属性“ s”表示白色文本和红色背景。距离我已经近了。我还找不到任何实际上只是将文本设置为红色的东西。
编辑:如果有用,我在这里找到了excel的s属性值列表:https://datatables.net/reference/button/excelHtml5
解决方法
编辑:如果只需要一个红色字体值,则可以替换一种预设字体:
var styles = xlsx.xl['styles.xml'];
// change white font to red for negative numbers
$('fonts font:nth-child(2) color',styles).attr('rgb','FFFF0000');
// reference this font with $('c').attr('s','1');
好的,所以我实际上设法完成了这项工作。您必须使用自定义字体/填充/边框值。这些值在“ styles.xml”文件中可用。请参见以下代码:
customize: function (xlsx) {
// add in custom font for negative numbers
var styles = xlsx.xl['styles.xml']
$('fonts',styles).empty();
$('fonts',styles).attr('count','3');
$('fonts',styles).append(`
<font>
<sz val="11"/>
<color rgb="00000000"/>
<name val="Calibri"/>
<family val="2"/>
<scheme val="minor"/>
</font>
<font>
<b/>
<sz val="11"/>
<color rgb="00000000"/>
<name val="Calibri"/>
<family val="2"/>
<scheme val="minor"/>
</font>
<font>
<sz val="11"/>
<color rgb="FFFF0000"/>
<name val="Calibri"/>
<family val="2"/>
<scheme val="minor"/>
</font>
`);
$('fills',styles).empty();
$('fills','2');
$('fills',styles).append(`
<fill>
<patternFill patternType="none"/>
</fill>
<fill>
<patternFill patternType="gray125"/>
</fill>
`);
$('borders',styles).empty();
$('borders','1');
$('borders',styles).append(`
<border>
<left/>
<right/>
<top/>
<bottom/>
<diagonal/>
</border>
`);
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var rows = $('row:gt(2)',sheet);
rows.each(function () {
// bold all rows where first cell ends with : (totals,% or revs)
if ($('c:first-of-type is t',this).text().endsWith(':')) {$('c',this).attr('s','1');}
// highlight red all rows that start with - (negative numbers)
$('c',this).each(function() {
if ($('v',this).text().startsWith('-')) {
console.log($('v',this).text());
$(this).attr('s','2');
}
});
});
}
在这里,我要去除默认字体,填充和边框。我要添加三种字体:标准的黑色字体,粗体的黑色字体和红色的字体。
我还添加了标准填充和边框。
然后我可以使用“ s”属性来引用它们。基本值是不同的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。