1

我正在使用 JSF 2.2 开发 Web Java 应用程序。和 PrimeFaces 6.0。我想构建一个p:panelGrid带有p:column特定大小的 -s ，但此时，所有p:column-s 都具有相同的width，如何定义特定大小和响应？

这是我的所有代码：

<?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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>TSPSupport - Principal</title>
    </h:head>
    <h:body>
        <p:panelGrid>
            <f:facet name="header">
                <p:row>
                    <p:column rowspan="1" colspan="12">
                        A
                    </p:column>
                </p:row>
            </f:facet>

            <p:row>
                <p:column rowspan="1" colspan="12">
                    B
                </p:column>
            </p:row>
            <p:row>
                <p:column rowspan="1" colspan="5">
                    C
                </p:column>
                <p:column rowspan="1" colspan="2">
                    D
                </p:column>
                <p:column rowspan="1" colspan="5">
                    E
                </p:column>
            </p:row>
            <p:row>
                <p:column rowspan="1" colspan="5">
                    F
                </p:column>
                <p:column rowspan="1" colspan="2">
                    G
                </p:column>
                <p:column rowspan="1" colspan="5">
                    H
                </p:column>
            </p:row>

        </p:panelGrid>
    </h:body>
</html>

页面是这样的：

在此处输入图像描述

我想要p:column-s of C, F, EandH会有 41.666% 的 with 和p:column-s of DandG会有 16.666% of with, 100% 等于 12。

谢谢！

4

1 回答 1

1

您只有 3 列。仅仅为了获得“预期视图”而定义 html 属性并不是最佳实践。应该改用 CSS。

解决方案：

<style type="text/css">
    .col-12 {
        width: 100%;
    }

    .col-5 {
        width: 41.666%;
    }

    .col-2 {
        width: 16.666%;
    }
</style>

<p:panelGrid styleClass="col-12">
    <f:facet name="header">
        <p:row>
            <p:column colspan="3" styleClass="col-12">
                A
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column colspan="3" styleClass="col-12">
            B
        </p:column>
    </p:row>
    <p:row>
        <p:column styleClass="col-5">
            C
        </p:column>
        <p:column styleClass="col-2">
            D
        </p:column>
        <p:column styleClass="col-5">
            E
        </p:column>
    </p:row>
    <p:row>
        <p:column styleClass="col-5">
            F
        </p:column>
        <p:column styleClass="col-2">
            G
        </p:column>
        <p:column styleClass="col-5">
            H
        </p:column>
    </p:row>
</p:panelGrid>
于 2017-01-13T08:42:27.110 回答