頂級黃金對齊面臨的DataGrid

創建頁面和使用數據網格有：頂級黃金對齊面臨的DataGrid

<?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; 
}

面板內的中心第一個DataGrid alligns，但我希望它allign上最佳。我該怎麼辦？謝謝！

來源

2014-10-06 Vadim

你可以通過使用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>

來源

2014-10-07 04:14:17 wittakarn

哇！魔法！這真的很有幫助。謝謝:) – Vadim 2014-10-10 09:00:13

不客氣。 – wittakarn 2014-10-10 09:02:16

頂級黃金對齊面臨的DataGrid

回答

相關問題