Question

我正在尝试在我的视图中添加DataGrid。我知道DataGrid只能保留在布局面板中，因为ProvideResize和RequiresResize接口。

问题是，我想在DataGrid表的顶部添加一个过滤器，过滤器不能有一个固定的高度，它可能更大或更小。

没有布局面板会接受多于一个要调整大小的子项，而是接受LayoutPanel本身。但是，每个图层都需要以百分比形式设置高度，这也不行。

如果我使用CellTable更改DataGrid然后在Flow Panel中添加它们，问题就会解决，但表必须是可滚动的。

我需要的是一个FlowLayoutPanel，但GWT中没有这样的Panel

我在想，唯一的办法就是尝试创建一个自定义面板来实现ProvideResize和RequiresResize接口。

这就是使用LayoutPanel的样子：

    <g:layer left="2%" right="68%" top="2%" bottom="93%">                                   
        <g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
    </g:layer>

    <g:layer left="2%" right="68%" top="9%" bottom="56%">                                   
        <g:SplitLayoutPanel>
            <g:center>
                <g:HTMLPanel>
                    <g:FlowPanel ui:field="criteriaPanel" visible="false" />
                    <g:FlowPanel>
                        <g:Button ui:field="refresh">
                            <ui:text from="{text.refreshButtonCaption}" />
                        </g:Button>
                    </g:FlowPanel>
                </g:HTMLPanel>
            </g:center>
        </g:SplitLayoutPanel>
    </g:layer>

    <g:layer left="2%" right="2%" top="45%" bottom="5%">                                    
        <g:SplitLayoutPanel>
            <g:center>
                <c:DataGrid ui:field='table' />
            </g:center>
        </g:SplitLayoutPanel>
    </g:layer>

    <g:layer left='2%' right='2%' top="95%" bottom="0%">                                    
        <g:HTMLPanel>
            <table style="width:100%">
                <tr>
                    <td align='center'>
                        <c:SimplePager ui:field='pager' />
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:layer>

</g:LayoutPanel>

任何人都可以帮我吗？非常感谢提前。

Answer 1

如果您不关心非常旧的浏览器，请使用flexbox CSS layout model - 我会一直使用DataGrid（以及其他所有浏览器）。

然后，您只需将display: flex;添加到容器中（即您使用LayoutPanel的内容），然后在DataGrid上设置flex-grow: 1。这将告诉DataGrid在呈现容器中的其他小部件之后占用所有可用空间。

P.S。在过去几年中，出于性能原因，我尽量避免使用LayoutPanels，尤其是在移动设备上。

Answer 2

看起来像CSS做了伎俩。非常感谢。这就是它的样子：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui" 
                xmlns:c="urn:import:com.google.gwt.user.cellview.client">

    <ui:with field='res' type='com.vsg.vraweb.client.resource.Resources' />
    <ui:with field='text' type='com.vsg.vralang.client.GlobalConstants' />


    <!-- 

        CSS Tricks tutorial : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

        1) 'display: flex;' - enables a flex context for all its direct children. 

        2) 'flex-direction: row | row-reverse | column | column-reverse;' - This establishes 
        the main-axis, thus defining the direction flex items are placed in the flex 
        container.

        3) flex-grow: <number>; - This defines the ability for a flex item to grow if necessary. 
    -->

    <ui:style>
        .container {
            display: flex;
            flex-direction: column;
        }

        .dataGrid {  
            width: 100%;
            flex-grow: 1;
        }
    </ui:style>

    <g:FlowPanel addStyleNames="{style.container}">
        <g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
        <g:HTMLPanel>
            <g:FlowPanel ui:field="criteriaPanel" visible="false" />
            <g:FlowPanel>
                <g:Button ui:field="refresh">
                    <ui:text from="{text.refreshButtonCaption}" />
                </g:Button>
            </g:FlowPanel>
        </g:HTMLPanel>
        <c:DataGrid ui:field='table' addStyleNames="{style.dataGrid}"/>
        <g:HTMLPanel>
            <table style="width:100%">
                <tr>
                    <td align='center'>
                        <c:SimplePager ui:field='pager' />
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:FlowPanel>

</ui:UiBinder>

GWT - 在同一视图/面板中使用Filter的DataGrid表

2 个答案: