如何在ZK主题中更改网格默认状态?

时间:2015-03-16 10:22:11

标签: zk zk-grid

我有一个用ZK构建的页面。在此页面中有一个开始搜索的按钮。如果有一些数据,它们会出现在网格视图中。 每个数据都以这种方式构建: v Date1(年/月/日)     - 项目     - 项目     - 项目 v Date2(年/月/日)     - 项目     - 项目

Lecter V表示箭头,但我无法发布图像,因此我使用的“v”具有相似的图像。

它工作正确,但存在问题。 我会遇到这种情况:

  

日期1(年/月/日)

     

日期2(年/月/日)

当我点击日期时,我希望箭头变为“v”并显示所有数据。 如果在第一种情况下我点击日期就会变得很近。

如何更改网格项的默认视图?

这是我的代码

<grid id="demoGrid" width="50%" height="400px" style ="float:left"
        model="@bind(vm.value)" emptyMessage="No data">
        <columns menupopup="auto">
            <column sort="auto(Hour)" label="Hour" width="150px"/>
            <column sort="auto(Value)" label="Value(bpm)" hflex="1" />             
        </columns>
        <!-- template for group -->
        <template name="model:group">
            <group label="@load(each)" />
        </template>

        <!-- template for each element in model -->
        <template name="model" >

            <row>
                <label value="@load(each.hour)" />
                <label value="@load(each.value)" />                
            </row>
        </template>

        <!-- template for footer -->
        <template name="model:groupfoot">
            <groupfoot>
                <cell colspan="5" style="text-align: right; padding-right: 15px">
                    <label value="@load(each)" style="font-weight:bold;" />
                </cell>
            </groupfoot>
        </template>

    </grid>

我尝试在此子代码中使用标记详细信息:

<template name="model">
    <details open="false">
        <row>
            <label value="@load(each.hour)" />
            <label value="@load(each.value)" />                
        </row>
    </details>
</template>

1 个答案:

答案 0 :(得分:0)

尝试这样的细节:

<template name="model">
    <row>
        <detail open="false">
            <hlayout>
                <label value="@load(each.hour)" />
                <label value="@load(each.value)" />                
            </hlayout>
        </detail>
        <label value="second column"/>
    </row>
</template>

解释:

  • 详细信息只能包含 1个根元素,这就是我们设置hlayout的原因。 当然你可以把它改成div或者你想要的任何东西。
  • row代码必须位于详细信息标记之外。
  • detail取一列,因此对于此示例,您需要提供2列。

编辑:

I created a fiddle.