如何合并primefaces数据表行中的单元格？答案

【问题标题】：How to merge cells in a primefaces datatable row?如何合并primefaces数据表行中的单元格？
【发布时间】：2019-11-30 03:47:40
【问题描述】：

这可以通过数据表标签或 CSS 实现吗？任何解决方案都是有帮助的。如果可能，日期的搜索文件可以在同一列中。

Primefaces 数据表：

datatable

数据表代码：

<p:dataTable>
        <p:column filterBy="#{log.mbr}" sortBy="#{log.mbr}" headerText="mbr">
            <h:outputText value="#{log.mbr}" />
        </p:column>
        <p:column id="dateFrom" headerText="datum od"
            filterBy="#{log.datumOd}" sortBy="#{log.datumUpisa}">
            <f:facet name="filter">
                <p:calendar onkeypress="PF('loggerTable').filter()"
                    onchange="PF('loggerTable').filter()" id="from"
                    styleClass="customCalendar" pattern="dd/MM/yyyy"
                    widgetVar="dateFrom">
                    <p:ajax event="dateSelect" oncomplete="PF('loggerTable').filter()"
                        update="logsTable" />
                </p:calendar>
            </f:facet>
            <h:outputText id="datumOdZaBrisanje" value="#{log.datumUpisa}" />
        </p:column>
        <p:column id="dateTo" headerText="datum do" filterBy="#{log.datumDo}">
            <f:facet name="filter">
                <p:calendar onchange="PF('loggerTable').filter()" id="to"
                    styleClass="customCalendar" pattern="dd/MM/yyyy"
                    widgetVar="calendarFrom">
                    <p:ajax event="dateSelect" oncomplete="PF('loggerTable').filter()"
                        update="logsTable" />
                </p:calendar>
            </f:facet>
        </p:column>
        <p:column style="width:40px;text-align: center" headerText="prikaz">
            <p:commandButton update=":form:logDetail"
                oncomplete="PF('logDialog').initPosition();PF('logDialog').show()"
                icon="fa fa-search">
                <f:setPropertyActionListener value="#{log}"
                    target="#{logger.selectedLog}" />
            </p:commandButton>
        </p:column>
</p:dataTable>

【问题讨论】：

cell merge in datatable at primefaces的可能重复
我看到了那个问题，但答案并没有解决我的问题
您要过滤从日期 od 到的日期？？或者Date od 和Date to 是两个不同的日期？
只有一个日期..如果选择了dateOd(dateFrom)，则日期必须在之后，如果选择了dateDo(dateTo)，则日期必须在之前，如果两个选择的日期都在之间
我认为您必须更改描述。您希望在 2 天之间进行日期过滤

标签： jsf primefaces merge

【解决方案1】：

这段代码做了类似的事情。

xhtml

  <p:dataTable id="MissionTable"
                             value="#{MissionsBean.missionsList}"
                             var="record"
                             widgetVar="MissionTable"
                             selection="#{MissionsBean.mission}"
                             rowKey="#{record}"
                             filterDelay="600"
                             >
 .............
                    <p:column headerText="Date Start" sortBy="#{record.missionDateStart}"
                              filterBy="#{record.missionDateStart}"
                              filterFunction="#{MissionsBean.filterByDateStart}"
                              filterMatchMode="contains" style="width: 180px!important; text-align: center;">

                        <f:facet name="filter">
                            <h:inputHidden id="filter"/>
                        </f:facet>
                        <f:facet name="header">
                            <p:link value="Date Start" style="color: white;"
                                    onclick="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = ''"
                            />
                            <br/>
                            <p:calendar id="sfrom" pattern="dd/MM/yy" size="4" navigator="true">
                                <p:ajax event="dateSelect"
                                        onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('sfrom')}_input'))[0].value + '>' + $(PrimeFaces.escapeClientId('#{p:component('sto')}_input'))[0].value"
                                        oncomplete="PF('MissionTable').filter()"/>
                            </p:calendar>
                            <h:outputText class="fa fa-arrows-h fa-2x" style="vertical-align: middle;"/>

                            <p:calendar id="sto" pattern="dd/MM/yy" size="4" navigator="true">
                                <p:ajax event="dateSelect"
                                        onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('sfrom')}_input'))[0].value + '>' + $(PrimeFaces.escapeClientId('#{p:component('sto')}_input'))[0].value"
                                        oncomplete="PF('MissionTable').filter()"/>
                            </p:calendar>
                        </f:facet>
                             <h:outputText value="#{record.missionDateStart}">
                                 <f:convertDateTime pattern="dd MMM yyyy HH:mm"></f:convertDateTime>
                             </h:outputText>

                    </p:column>
......................
       </p:dataTable>

自定义过滤器是

 public boolean filterByDate(Object value, Object filter, Locale locale) {
    String filterText = (filter == null) ? null : filter.toString().trim();
    if (filterText == null || filterText.isEmpty()) {
        return true;
    }
    if (value == null) {
        return false;
    }

    DateTimeFormatter sdf = DateTimeFormatter.ofPattern("dd/MM/yy");
    Instant instant = ((Date) value).toInstant(); //Zone : UTC+0

    LocalDate dateValue = instant.atZone(ZoneId.of("Europe/Athens")).toLocalDate();
    LocalDate dateFrom;
    LocalDate dateTo;
    try {
        String fromPart = filterText.substring(0, filterText.indexOf(">"));
        String toPart = filterText.substring(filterText.indexOf(">") + 1);
        dateFrom = fromPart.isEmpty() ? null : LocalDate.parse(fromPart, sdf);
        dateTo = toPart.isEmpty() ? null : LocalDate.parse(toPart, sdf);
    } catch (Exception e) {
        log.error("unable to parse date: " + filterText, e);
        return false;
    }

    return (dateFrom == null || dateValue.isAfter(dateFrom) || dateValue.isEqual(dateFrom))
            && (dateTo == null || dateValue.isBefore(dateTo) || dateValue.isEqual(dateTo));
}

我记得我的代码是根据this answer写的

注意日期pattern。在我的示例中与您的示例不同。

抱歉，我无法将我的代码调整为您的。希望这段代码对你有所帮助。

如果你使用 Primefaces 7，你可以尝试使用datePicker Range Selection：

【讨论】：