Question

我已经使用jspdf和autotbale创建了一个表，该表可以按预期工作，直到我尝试使用didParseCell格式化某些单元格数据为止。所有数据输入正确，颜色编码也正确。发生的是，标头还从下面的第一个单元格获取了应用于它的解析数据。查看图片。

header format

我怀疑这是由于didParseCell的第一部分所致： data.row.index === 0行，但是如果我将其更改为data.row.index === 1，则它将所有其余表数据向下推。我尝试过更改每行的值，完全删除标题，并且仍然没有运气。我发现的唯一解决方法是在另一个表的顶部绘制另一个表（仅标头）。

pdf.autoTable
        ({
            startY: 85,
            margin: 20,
            styles: { lineColor: [10, 10, 10], lineWidth: 0.1 },
            headStyles: {halign: 'center', fillColor: [10, 10, 10]},
            columnStyles: {0: {halign: 'left'},1: {halign: 'center',columnWidth: 22},2: {halign: 'center',columnWidth: 22},3: {halign: 'center',columnWidth: 22},4: {halign: 'center',columnWidth: 22}},
            head: [['Test Data', 'Round 1', 'Round 2', 'Change','Compare']],
            body: [
                ['20m Beep Test', beepResults.R1Score,beepResults.R2Score,beepResults.Change,''],
                ['5m Agility Sprint (seconds)', agilitySprintResults.R1Score, agilitySprintResults.R2Score, agilitySprintResults.Change, ''],
                ['Horizontal Standing Jump (cm)',horizontalStandingJumpResults.R1Score,horizontalStandingJumpResults.R2Score,horizontalStandingJumpResults.Change,''],
                ['Flexed Arm Hang (seconds)',flexedArmHangResults.R1Score,flexedArmHangResults.R2Score,flexedArmHangResults.Change,''],
                ['Sit n Reach Flexibility Left (cm)',sitReachFlexibilityLResults.R1Score,sitReachFlexibilityLResults.R2Score,sitReachFlexibilityLResults.Change,''],
                ['Sit n Reach Flexibility Right (cm)',sitReachFlexibilityRResults.R1Score,sitReachFlexibilityRResults.R2Score,sitReachFlexibilityRResults.Change,'']
            ],

            //Colours our column boxes appropriately
            didParseCell: function (data)
            {
                if (data.row.index === 0 && data.column.index === 3) {
                    data.cell.text = FormatChangeForPdf(beepResults.Change);
                    data.cell.styles.fillColor = ChangeToColourArray(PercentageChangeFormatted(beepResults.Change));
                }
                if (data.row.index === 1 && data.column.index === 3) {
                    data.cell.text = FormatChangeForPdf(agilitySprintResults.Change);
                    data.cell.styles.fillColor = ChangeToColourArray(PercentageChangeFormatted(agilitySprintResults.Change));
                }
                if (data.row.index === 2 && data.column.index === 3) {
                    data.cell.text = FormatChangeForPdf(horizontalStandingJumpResults.Change);
                    data.cell.styles.fillColor = ChangeToColourArray(PercentageChangeFormatted(horizontalStandingJumpResults.Change));
                }
                if (data.row.index === 3 && data.column.index === 3) {
                    data.cell.text = FormatChangeForPdf(flexedArmHangResults.Change);
                    data.cell.styles.fillColor = ChangeToColourArray(PercentageChangeFormatted(flexedArmHangResults.Change));
                }
                if (data.row.index === 4 && data.column.index === 3) {
                    data.cell.text = FormatChangeForPdf(sitReachFlexibilityLResults.Change);
                    data.cell.styles.fillColor = ChangeToColourArray(PercentageChangeFormatted(sitReachFlexibilityLResults.Change));
                }
                if (data.row.index === 5 && data.column.index === 3) {
                     data.cell.text = FormatChangeForPdf(sitReachFlexibilityRResults.Change);
                    data.cell.styles.fillColor = ChangeToColourArray(PercentageChangeFormatted(sitReachFlexibilityRResults.Change));
                }

                if (data.row.index === 0 && data.column.index === 4) {
                    data.cell.text = CheckFeedback(beepResults);
                    data.cell.styles.fillColor = ChangeToColourArray(CheckColours(beepResults));
                }
                if (data.row.index === 1 && data.column.index === 4) {
                    data.cell.text = CheckFeedback(agilitySprintResults);
                    data.cell.styles.fillColor = ChangeToColourArray(CheckColours(agilitySprintResults));
                }
                if (data.row.index === 2 && data.column.index === 4) {
                    data.cell.text = CheckFeedback(horizontalStandingJumpResults);
                    data.cell.styles.fillColor = ChangeToColourArray(CheckColours(horizontalStandingJumpResults));
                }
                if (data.row.index === 3 && data.column.index === 4) {
                    data.cell.text = CheckFeedback(flexedArmHangResults);
                    data.cell.styles.fillColor = ChangeToColourArray(CheckColours(flexedArmHangResults));
                }
                if (data.row.index === 4 && data.column.index === 4) {
                    data.cell.text = CheckFeedback(sitReachFlexibilityLResults);
                    data.cell.styles.fillColor = ChangeToColourArray(CheckColours(sitReachFlexibilityLResults));
                }
                if (data.row.index === 5 && data.column.index === 4) {
                     data.cell.text = CheckFeedback(sitReachFlexibilityRResults);
                    data.cell.styles.fillColor = ChangeToColourArray(CheckColours(sitReachFlexibilityRResults));
                }
            },
        });

我希望标题的最后两个单元格为黑色，并分别说“更改”和“比较”。

Jspdf自动表格标头从下面的单元格插入单元格数据

0 个答案: