Xpages 获取重复控件内面板的 ID

Question

我在重复控件中有一个面板，我试图在单击按钮时从中拉出内部 HTML？我已经尝试了下面的代码，但它不起作用，因为当我在浏览器中启动页面时 html 呈现的 ID 不同。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:repeat id="repeat1" rows="30" value="#{javascript:getNames();}" var="rowData" style="width:100%">
        <xp:panel id="pnlReport">
        <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData.Name}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>
            </xp:panel>
        </xp:repeat>

    <xp:button value="GET INNER HTML" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var el = XSP.getElementById('#{id:pnlReport}'); alert(el.innerHTML);]]>
            </xp:this.script>
        </xp:eventHandler>
    </xp:button>
</xp:view>

Answer 1

<xp:panel id="pnlReport"> 在重复块内。

Id 将在您的示例中呈现为

"view:_id1:repeat1:0:pnlReport"
"view:_id1:repeat1:1:pnlReport"
...

'#{id:pnlReport}' 必须在相同的重复块中使用才能获得正确的 ID。

否则你只会得到没有任何索引的“view:_id1:repeat1:pnlReport”——这样的 id 不存在。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:repeat id="repeat1" rows="30" value="#{javascript:['aaa', 'bbb'];}"
        var="rowData" style="width:100%">
        <xp:panel id="pnlReport">
            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:panel>
        <xp:button value="GET INNER HTML" id="button1">
            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script><![CDATA[
                    var el = XSP.getElementById('#{id:pnlReport}');
                    alert(el.innerHTML);]]>
                </xp:this.script>
            </xp:eventHandler>
        </xp:button>
    </xp:repeat>
</xp:view>

作为替代方案，您可以将面板和按钮放在重复控件之外。这样你会得到 table 的整个渲染 HTML:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:panel id="pnlReport">
        <xp:table style="width:100.0%">
            <xp:repeat rows="30" value="#{javascript:['aaa', 'bbb'];}"
                var="rowData" style="width:100%" removeRepeat="true">
                <xp:tr>
                    <xp:td>
                        <xp:label value="#{javascript:rowData}" id="label3"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:repeat>
        </xp:table>
    </xp:panel>
    <xp:button value="GET INNER HTML" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[
                var el = XSP.getElementById('#{id:pnlReport}');
                alert(el.innerHTML);]]>
            </xp:this.script>
        </xp:eventHandler>
    </xp:button>
</xp:view>

Xpages 获取重复控件内面板的 ID

Xpages Get ID of a Panel inside a repeat control

javascript

xpages

repeat

hcl-notes