如何设置两个时间间隔之间的单元格样式?

时间:2019-02-15 12:17:49

标签: java css vaadin8

我希望能够在两次间隔之间设置单元格的样式,例如:

  

开始日期01/03/2019和结束日期15/06/2019   单元格除以代表一个月的列。   因此,到目前为止,我要做的是从数据库中获取该日期并将其放入相应的单元格中。但是用我的解决方案,CSS被覆盖了,但我没有得到想要的结果。   一个月很容易,但是如果一个间隔是在差异月份中,例如从FEB开始并在MAY中结束,那么这对我来说很难(不是整月,但例如15 FEB和5月20日

这是一个单元格看起来一个月的样子

This is how will look the cell for one month

不同月份不同。

这是我必须为单元格设置样式的网格

This is the grid where I have to style the cells

  

我的问题是我需要访问其他月份,并且CSS被覆盖...我使用关键字!important,但仍然无法正常工作。   还有其他想法吗?

这是我的代码

                                int valueOfStartDay = (int) (((double) startDayValue / (double) startMonthLength) * 100);
                            int valueOfEndDay = 100 - valueOfStartDay;
                            //(int) (((double) endDayVAlue / (double) endMonthLength) * 100);
                            if (start_Date.getMonth() == columnDate.getMonth() && end_Date.getMonth() == columnDate.getMonth())
                            {
                                extraCellStyle = getExtraCellStyleStartDay(valueOfStartDay) +
                                                    extraCellStyle + getExtraCellStyleEndDay(valueOfEndDay);
                            }
                            else
                            {
                                if (start_Date.getMonth() == columnDate.getMonth())
                                {
                                    extraCellStyle = getExtraCellStyleStartDay(valueOfStartDay) + extraCellStyle;
                                }
                                else if (end_Date.getMonth() == columnDate.getMonth())
                                {
                                    extraCellStyle = getExtraCellStyleEndDay(valueOfStartDay) + extraCellStyle;
                                }
                                else
                                {
                                    extraCellStyle = " v-table-cell-content-" +
                                            CELLSTYLE_100_PRECENTSTART + extraCellStyle + " v-table-cell-content-"
                                                + CELLSTYLE_100_PRECENTEND;
                                }
                            }

以及我也使用的方法:

  

这是开始日期,但结束只是名称。

    private String getExtraCellStyleStartDay(int value)
{
    String extraCellStyle = "";
    if (value <= 5)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_100_PRECENTSTART;
    }
    else if (value <= 10)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_10_PRECENTSTART;
    }
    else if (value <= 20)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_20_PRECENTSTART;
    }
    else if (value <= 30)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_30_PRECENTSTART;
    }
    else if (value <= 40)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_40_PRECENTSTART;
    }
    else if (value <= 50)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_50_PRECENTSTART;
    }
    else if (value <= 60)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_60_PRECENTSTART;
    }
    else if (value <= 70)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_70_PRECENTSTART;
    }
    else if (value <= 80)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_80_PRECENTSTART;
    }
    else if (value <= 90)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_90_PRECENTSTART;
    }
    else if (value <= 100)
    {
        extraCellStyle = " v-table-cell-content-" + CELLSTYLE_100_PRECENTSTART;
    }
    return extraCellStyle;
}
  

我的CSS是

  .v-table-cell-content-10-percentageStart>.v-table-cell-wrapper {
     background-size: 10% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-20-percentageStart>.v-table-cell-wrapper {
     background-size: 20% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-30-percentageStart>.v-table-cell-wrapper {
     background-size: 30% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-40-percentageStart>.v-table-cell-wrapper {
    background-size: 40% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

    .v-table-cell-content-50-percentageStart>.v-table-cell-wrapper {
    background-size: 50% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-60-percentageStart>.v-table-cell-wrapper {
    background-size: 60% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-70-percentageStart>.v-table-cell-wrapper {
     background-size: 70% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-80-percentageStart>.v-table-cell-wrapper {
    background-size: 80% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-90-percentageStart>.v-table-cell-wrapper {
     background-size: 90% 100% !important;
    background-repeat: no-repeat;
    background-position: right;
}

.v-table-cell-content-100-percentageStart>.v-table-cell-wrapper {
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}

     .v-table-cell-content-10-percentageEnd>.v-table-cell-wrapper {
     background-size: 10% 100% !important;
}

.v-table-cell-content-20-percentageEnd>.v-table-cell-wrapper {
     background-size: 20% 100% !important;
}

    .v-table-cell-content-30-percentageEnd>.v-table-cell-wrapper {
     background-size: 30% 100% !important;
}

.v-table-cell-content-40-percentageEnd>.v-table-cell-wrapper {
    background-size: 40% 100% !important;
}

    .v-table-cell-content-50-percentageEnd>.v-table-cell-wrapper {
    background-size: 50% 100% !important;
}

.v-table-cell-content-60-percentageEnd>.v-table-cell-wrapper {
    background-size: 60% 100% !important;;
}

.v-table-cell-content-70-percentageEnd>.v-table-cell-wrapper {
    background-size: 70% 100% !important;;
}

.v-table-cell-content-80-percentageEnd>.v-table-cell-wrapper {
    background-size: 80% 100% !important;
}

.v-table-cell-content-90-percentageEnd>.v-table-cell-wrapper {
    background-size: 90% 100% !important;;
}

.v-table-cell-content-100-percentageEnd>.v-table-cell-wrapper {
    background-size: 100% 100%;
}
  

这是否有可能,我有办法定义所有情况并将其设为静态,但是可以肯定的是,这不是最好的。

0 个答案:

没有答案