避免给 Wicket 的 ListView 一个带有 body 的 html 元素

Question

我正在尝试将嵌套的 Wicket ListView 结构显示为 html table 等 <div> 结构。这是因为我希望此 table 的某些部分在运行时更改它的可见性，因此我想添加 WebMarkContainers 然后对其进行操作。
由于这是 most-likeley 一个 html 问题，我首先只发布 html.

<form wicket:id="matrixForm">
    <div class="table">
        <div class="table-header-group">
            <div class="table-row">
                <div class=table-cell></div>
                <div class=table-cell></div>
                <div wicket:id="columnsList" class="table-cell">
                    <div wicket:id="zustLabel"></div>
                </div>
            </div>
        </div>
        <div class="table-row-group">
            <div wicket:id="groupsList" class="table-row">
                <div wicket:id="groupLabel" class="table-cell"></div>               
                <div wicket:id="rowsList">
                    <div wicket:id="erhebungLabel" class="table-cell"></div>
                    <div wicket:id="cellList" class="table-cell">
                        <div wicket:id="cell">
                            <input wicket:id="checkbox" type="checkbox">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

基本上我不会使用这个 <div wicket:id="rowsList">，但我需要一个元素来映射我的 ListView。生成的结构是：

<div class="table">
<div class="table-header-group">
    <div class="table-row">
        <div class="table-cell"></div>
        <div class="table-cell"></div>
        <div class="table-cell">
            <div>zustLabel</div>
        </div>
        <div class="table-cell">
            <div>zustLabel</div>
        </div>
        <div class="table-cell">
            <div>zustLabel</div>
        </div>
    </div>
</div>
<div class="table-row-group">
    <div class="table-row">
        <div class="table-cell">groupLabel</div>
        <div ><!-- This is the rowsList div -->
            <div class="table-cell">erhebungLabel</div>
            <div class="table-cell">
                <div class="checked" id="cell15">
                    <input type="checkbox" checked="checked">
                </div>
            </div>
            <div class="table-cell">
                <div class="unchecked" id="cell18">
                    <input type="checkbox">
                </div>
            </div>
            <div class="table-cell">
                <div class="unchecked" id="cell17">
                    <input type="checkbox">
                </div>
            </div>
        </div>
    </div>
</div>

我在不想评论的<div>处做了标记。是否有可能在 table-row-group 中生成与在 table-header-group 中相同的结构？
每个标题为 "xxxList" 的元素代表一个 ListView，因此：

columnsList 显示 tables header
groupsList 将属于一起的行换行
rowsList 显示组的子类别
cellList 用复选框填充空闲字段

它更像是一个授权矩阵而不是数据table。我给类适当的 display:[table element] 属性让它们表现得像 table.

Fiddle Demo

Answer 1

您可以使用

而不是

避免给 Wicket 的 ListView 一个带有 body 的 html 元素

Avoid giving Wicket's ListView an html element with a body

html

css

listview

wicket