Question

我在那里创建页面并使用数据网格：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <h:link rel="stylesheet" type="text/css" href="mystyle.css"></h:link>
    <title>Prototype</title>
</h:head>
<h:body>
    <h3>Dashboard prototype</h3>
    <h:form>
        <p:dataGrid id = "grid"  
                    value="#{dashboardView.users}" 
                    var="user" 
                    columns="#{dashboardView.columns}" 
                    styleClass="gridClass">
            <p:column styleClass="gridClass">
              <p:panel header="#{user.user.displayName}" 
                       styleClass="gridClass">
                <p:dataGrid value="#{user.issues}" 
                            var="issue" 
                            columns="1">
                  <p:panel header="#{issue.key}">
                    "#{issue.summary}"
                  </p:panel>
                </p:dataGrid>
              </p:panel>
            </p:column>
        </p:dataGrid>
        <p:commandButton value="rrr" 
                         actionListener="#{dashboardView.button}" 
                         update="grid">
    </p:commandButton>
</h:form>
</h:body>
</html>

和CSS：

.gridClass {
    vertical-align: top;
    text-align: start;
}

First DataGrid中的面板在中心分配，但我希望它在顶部排列。我该怎么做？谢谢！

Answer 1

您可以使用jquery选择器解决，如下所示。

<script>
    $(document).ready(function() {
        $(".panelOnTopClass").parent().css("vertical-align", "top");
        $(".panelOnTopClass").parent().css("height", "300px");
    });
</script>
<h:form id="form">
    <p:dataGrid var="car" value="#{dataGridView.cars}" columns="3"
                rows="12" paginator="true" id="cars"
                paginatorTemplate="{CurrentPageReport}  
                {FirstPageLink} 
                {PreviousPageLink} 
                {PageLinks} 
                {NextPageLink} 
                {LastPageLink} 
                {RowsPerPageDropdown}"
                rowsPerPageTemplate="6,12,16"
                styleClass="gridClass">

        <f:facet name="header">
            Cars for Sale
        </f:facet>

        <p:panel header="#{car.id}" styleClass="panelOnTopClass">
            <h:panelGrid columns="1" style="width:100%">
                <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 

                <h:outputText value="#{car.year}" />
            </h:panelGrid>
        </p:panel>

    </p:dataGrid>

</h:form>

顶部对齐主要面DataGrid

1 个答案: