Question

我尝试动态创建html表的内容。根据一些用户输入，我想显示/隐藏其他行。

很简单的例子：

CREATE TABLE `playquzi`.`quiz` 
( `id` INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT , 
`name` VARCHAR(255) NOT NULL , 
`question_id` INT(11) NOT NULL , 
`awnser_id` INT(11) NOT NULL ) 
ENGINE = InnoDB;

如果 viewScope 设置为 true ，我希望此行显示出来。但我得到的是

    <xp:table border="1" width="100%">
    <xp:repeat id="repeat1" rows="30" repeatControls="true" removeRepeat="true">
        <xp:this.value><![CDATA[#{javascript:return [1,2]}]]></xp:this.value>

            <tr>
                <td>Item 1</td>
                <td>Item 2</td>
            </tr>

            <xp:tr>
                <xp:this.rendered><![CDATA[#{javascript:viewScope.get("show")}]]></xp:this.rendered>
                <xp:td colspan="2">             
                Action Row
            </xp:td>

        </xp:tr>
    </xp:repeat>
    </xp:table>

渲染的行与重复的表格单元格的重复文本内容一起放在表格树之外。

如何通过SSJS显示/隐藏表格行？

Answer 1

如果服务器版本是8.5.3或更高版本，则可以使用带有tagName属性的xp：panel-tag（如果xp：tr不起作用）：

<xp:panel tagName="tr" rendered="#{viewScope.show == true}">
<td>Action row</td>
</xp:panel>

Answer 2

您的示例代码非常适合我。它在表格中呈现动态动作行。

这是您通过复选框＆＃34;显示操作行＆＃34;扩展的示例。它部分刷新了表格。如您所见，操作行显示和消失取决于复选框值：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:checkBox
        text="Show action row"
        id="checkBox1"
        value="#{viewScope.show}"
        checkedValue="true"
        uncheckedValue="false">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial" refreshId="table1">
        </xp:eventHandler>
    </xp:checkBox>
    <br />
    <xp:table id="table1" border="1" width="100%">
        <xp:repeat id="repeat1" rows="30" repeatControls="true" removeRepeat="true">
            <xp:this.value><![CDATA[#{javascript:return [1,2]}]]></xp:this.value>
            <tr>
                <td>Item 1</td>
                <td>Item 2</td>
            </tr>
            <xp:tr>
                <xp:this.rendered><![CDATA[#{javascript:viewScope.show =='true'}]]></xp:this.rendered>
                <xp:td
                    colspan="2"> Action Row</xp:td>
            </xp:tr>
        </xp:repeat>
    </xp:table>
</xp:view>

从那里开始完成真实的代码。

如何从SSJS动态显示/隐藏表格行？

2 个答案: