Javascript <；s：迭代器对于列表不能正常工作，我使用的是struts2

我有一个s:iterator，它迭代一个属性列表，因为列表中的每个项都有属性键、值和类别。基于类别，我需要将值填充到迭代器中定义的divs中。我正在使用jquery选项卡。这里的迭代器没有正确迭代。请看代码，它很容易理解

<div id="tabs">
    <ul>
        <li><a href="#channel">Channel</a></li>
        <li><a href="#connection">Connection</a></li>                                        
    </ul>

    <s:iterator value="property" status="rowstatus">

        <div id="channel">
            <s:if test="(property[#rowstatus.index].category=='Channel')">
                <table>
                    <tr><s:hidden name="property[%{#rowstatus.index}].key" />
                        <td><s:label value="%{property[#rowstatus.index].key}">    </s:label></td>
                        <td> <s:textfield name="property[%{#rowstatus.index}].value">
                            </s:textfield>
                        </td>                                                      
                    </tr>
                </table>
            </s:if>

        </div>

        <div id="connection">

            <s:if test="(property[#rowstatus.index].category=='Connection')">
                <table>
                    <tr><s:hidden name="property[%{#rowstatus.index}].key" />
                        <td><s:label value="%{property[#rowstatus.index].key}"></s:label></td>
                        <td> <s:textfield name="property[%{#rowstatus.index}].value">
                            </s:textfield>
                        </td>                                                      
                    </tr>
                </table>
            </s:if>

        </div>

    </s:iterator>
</div>

更改JSP

<div id="tabs">
    <ul>
     <li><a href="#channel">Channel</a></li>
     <li><a href="#connection">Connection</a></li>                                        
    </ul>
    <div id="channel">
       <table>
              <s:subset source="property" decider="channelDecider">
                <s:iterator var="channel">
                  <tr><s:hidden name="property[%{property.indexOf(#channel)}].key" />
                    <td><s:label value="%{#channel.key}">    </s:label></td>
                    <td> <s:textfield name="property[%{property.indexOf(#channel)}].value" value="%{#channel.value}">
                        </s:textfield>
                    </td>                                                      
                  </tr>
                </s:iterator>
              </s:subset>
        </table>           
    </div>

    <div id="connection">

       <table>
              <s:subset source="property" decider="connectionDecider">
                <s:iterator var="connection">
                  <tr><s:hidden name="property[%{property.indexOf(#connection)}].key" />
                    <td><s:label value="%{#connection.key}">    </s:label></td>
                    <td> <s:textfield name="property[%{property.indexOf(#connection)}].value" value="%{#connection.value}">
                        </s:textfield>
                    </td>                                                      
                  </tr>
                </s:iterator>
              </s:subset>
        </table>           
    </div>
</div>

---

注意，

MyElement

是具有相应属性的列表元素类型

迭代器工作正常

您正在为集合中的每个项创建div，而不是为每组相似项创建div

虽然

会起作用，但作为替代方案，我会提出一个更简单、不以S2为中心的解决方案

附加

MyElement

代码：

public class MyElement {
    public boolean isChannel()    { return category.equals("Channel");    }
    public boolean isConnection() { return category.equals("Connection"); }
}

我不喜欢用字符串来表示类型

有很多方法可以将列表分解；手动操作，操作简单快捷；通过一个实用类，如果您在多个地方需要此功能，那么这很好；等等

可能的实用程序类别：

public class MyElementSplitter {
    // Also getters for both of these; possibly wrapped with an immutable collection.
    private List<MyElement> channels    = new ArrayList<>();
    private List<MyElement> connections = new ArrayList<>();

    public MyElementSplitter(List<MyElement> elements) {
        for (MyElement element: elements) {
            if (element.isChannel()) {
                channels.add(element);
            } else if (element.isConnection()) {
                connections.add(element);
            }
        }
    }
}

然后在视图中：

private MyElementSplitter elements; // And getter.

public String execute() {
    // And any additional processing, list retrieval, etc.
    elements = new MyElementSplitter(allElements);
    return SUCCESS;
}

<div id="channel">
    <s:iterator value="elements.channels" status="stat">
        <table>
            <tr>
                <s:hidden name="property[%{#stat.index}].key" />
                <td><s:label value="%{property[#stat.index].key}" /></td>
                <td><s:textfield name="property[%{#stat.index}].value" /></td>
            </tr>
        </table>
    </s:iterator>
</div>

<div id="connection">
    <s:iterator value="elements.connections" status="stat">
        <table>
            <tr>
                <s:hidden name="property[%{#stat.index}].key" />
                <td><s:label value="%{property[#stat.index].key}" /></td>
                <td><s:textfield name="property[%{#stat.index}].value" /></td>
            </tr>
        </table>
    </s:iterator>
</div>

如果这些部分总是相同的，那么我会将它们封装在基于JSP的自定义标记中

这将给我们留下以下几点：

<div id="tabs">
    <ul>
        <li><a href="#channel">Channel</a></li>
        <li><a href="#connection">Connection</a></li>
    </ul>

    <app:elementTab id="channel"    values="elements.channels"    />
    <app:elementTab id="connection" values="elements.connections" />
</div>

<div id="tabs">
    <ul>
        <li><a href="#channel">Channel</a></li>
        <li><a href="#connection">Connection</a></li>
    </ul>

    <app:elementTab id="channel"    values="elements.channels"    />
    <app:elementTab id="connection" values="elements.connections" />
</div>