zk冻结,列滚动时转到列表框的中间

时间:2017-10-27 04:08:26

标签: listbox zk frozen

我有一个zul包含一个列表框,我想冻结它的第一列,我使用冻结函数使其冻结。

<frozen columns="1" />

但问题是当我尝试滚动它时,应该冻结的列正在移动到列表框的中间,这看起来并不酷。

see the 1st column is in the middle of the listbox

这是我的祖尔

<window id="RelationshipResource" border="normal"  width="750px" title="List Detail" 
        closable="true" apply="${arg.controller}">
    <style dynamic="true">
        tr.z-row td.z-row-inner { border-right: 3px #CCC; }
    </style>
    <scrollview hflex="1" vflex="1">
        <div id="appMain" align="center" height="460px" width="99%" style="margin:5px;">
            <div class="centerApp"  height="250px" width="99%">
                <grid>
                    <columns >
                        <column label="" width="150px"/>
                        <column label=""/>
                    </columns>
                    <rows >
                        <row style="background-color:#FFFFFF">
                            <label value="Open New Relationship"/>
                            <textbox id="txtOpenNewRelationship" width="200px" />
                        </row>
                        <row style="background-color:#FFFFFF">
                            <label value="Item Code" />
                            <textbox id="txtItemCode" width="200px" />
                        </row>
                        <row style="background-color:#FFFFFF">
                            <label value="Item Description" />
                            <textbox id="txtItemDescription" width="400px" />
                        </row>
                        <row style="background-color:#FFFFFF">
                            <label value="Relationship line" />
                            <textbox id="txtRelationshipLine" width="100px" />
                        </row>
                    </rows>
                </grid>

                <div class="myTable"  height="110%" >
                    <listbox id="listboxSRN"  vflex="1" mold="paging" pageSize="5" pagingPosition="top">
                        <frozen columns="1" />
                        <listhead sizable="true">
                            <listheader label="1st col" width="240px"/>
                            <listheader label="2nd col" width="240px" />
                            <listheader label="3rd col" width="230px"/>
                            <listheader label="4th col" width="230px"/>
                            <listheader label="5th col" width="230px"/>
                            <listheader label="6th col" width="230px"/>
                        </listhead>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listitem >
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                            <listcell label="siTamvan" />
                        </listitem>
                        <listfoot style="margin:0px">
                            <listfooter></listfooter>
                            <listfooter align="right">TOTAL</listfooter>
                            <listfooter >
                                <textbox hflex="1" id="txtTotal"/>
                            </listfooter>
                        </listfoot>
                    </listbox>
                </div>
                <groupbox id="gb" mold="3d" style="vertical-align:middle;background-color:#FAFAFA;margin-top:2px">
                    <button id="btnClose" label="Close" image="/img/Logout24.png" height="40px" width="150px"/>
                </groupbox>   
                <!--<label value="You are using ZK version: ${desktop.webApp.version}"/>--> 
            </div>

        </div>
    </scrollview>
</window>

如何让第一列粘在列表框的左侧?因此,当我滚动它时,另一列会移动或丢失,但我的第一列保持原样。

即时通讯使用zk 6.5.5,你能否请你不要投票给我,我喜欢我的声誉,所以如果有什么遗失或者你需要更多信息请告诉我谢谢你

1 个答案:

答案 0 :(得分:0)

感谢Malte Hartwig,我找到了解决方案,因为我的div与id appmain有对齐=&#34; center&#34;,它对列表框的影响很大,使列在滚动时居中到最后。

解决方案是添加align =&#34; left&#34;属于我的包含列表框的div,因此列表框本身并不受来自上部div的center属性的影响。

这是代码

<window id="RelationshipResource" border="normal"  width="750px" title="List Detail" 
    closable="true" apply="${arg.controller}">

<scrollview hflex="1" vflex="1">
    <!-- this is the culprit that make my column moving to the center -->
    <div id="appMain" align="center" height="460px" width="99%" style="margin:5px;">
        <div class="centerApp"  height="250px" width="99%">
            <grid>
                <columns >
                    <column label="" width="150px"/>
                    <column label=""/>
                </columns>
                <rows >
                    <row style="background-color:#FFFFFF">
                        <label value="Open New Relationship"/>
                        <textbox id="txtOpenNewRelationship" width="200px" />
                    </row>
                    <row style="background-color:#FFFFFF">
                        <label value="Item Code" />
                        <textbox id="txtItemCode" width="200px" />
                    </row>
                    <row style="background-color:#FFFFFF">
                        <label value="Item Description" />
                        <textbox id="txtItemDescription" width="400px" />
                    </row>
                    <row style="background-color:#FFFFFF">
                        <label value="Relationship line" />
                        <textbox id="txtRelationshipLine" width="100px" />
                    </row>
                </rows>
            </grid>

            <!-- here we add align left to make the column not moving -->
            <div class="myTable" align="left" height="110%" >
                <listbox id="listboxSRN"  vflex="1" mold="paging" pageSize="5" pagingPosition="top">
                    <frozen columns="1" />
                    <listhead sizable="true">
                        <listheader label="1st col" width="240px"/>
                        <listheader label="2nd col" width="240px" />
                        <listheader label="3rd col" width="230px"/>
                        <listheader label="4th col" width="230px"/>
                        <listheader label="5th col" width="230px"/>
                        <listheader label="6th col" width="230px"/>
                    </listhead>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listitem >
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                        <listcell label="siTamvan" />
                    </listitem>
                    <listfoot style="margin:0px">
                        <listfooter></listfooter>
                        <listfooter align="right">TOTAL</listfooter>
                        <listfooter >
                            <textbox hflex="1" id="txtTotal"/>
                        </listfooter>
                    </listfoot>
                </listbox>
            </div>
            <groupbox id="gb" mold="3d" style="vertical-align:middle;background-color:#FAFAFA;margin-top:2px">
                <button id="btnClose" label="Close" image="/img/Logout24.png" height="40px" width="150px"/>
            </groupbox>   
            <!--<label value="You are using ZK version: ${desktop.webApp.version}"/>--> 
        </div>

    </div>
</scrollview>

here is the picture now the column stick in the left, the paging is going to left too actually because it is part of the listbox, but the close button still in the middle and i think that's enough

可能是因为我希望分页仍然在中间,就像我必须从列表框中分离da分页,但我不认为我需要它。

再次感谢您的提示