动态视图面板和 onColumnClick (CSJS) 事件的问题
Issue with Dynamic View Panel and onColumnClick (CSJS) event
使用动态视图面板并尝试在客户端 JS 的 onColumnClick 事件中获取用户单击的行的 UNID 或 NoteID。但是,XPage 未加载并显示如下错误
执行 JavaScript 动作表达式时出错
脚本解释器错误,行=1,列=9:[ReferenceError] 'rowData' 未找到
JavaScript代码
1: rowData.getNoteID()
完整的XPage代码如下所示。有没有办法获取行信息的句柄来构建此事件处理程序?目标是使用客户端 JS 打开一个新选项卡以显示用户单击的文档。
霍华德
<xe:dynamicViewPanel
id="dynamicViewPanel1"
var="rowData"
indexVar="index">
<xe:this.data>
<xp:dominoView
var="view1"
viewName="testview">
</xp:dominoView>
</xe:this.data>
<xp:eventHandler
event="onColumnClick"
submit="false">
<xe:this.script><![CDATA[alert('#{javascript:rowData.getNoteID()}');]]></xe:this.script>
</xp:eventHandler></xe:dynamicViewPanel></xp:view>
您无法在 CSJS 代码中使用 alert('#{javascript:rowData.getNoteID()}')
计算行的 noteId,因为这是在服务器端执行的 在 所有行都呈现之前。
请改用 rowAttrs
属性。它允许您向呈现的 table 行添加属性。您将添加一个属性 "noteId":
<xe:this.rowAttrs>
<xp:attr
name="noteId"
value="#{javascript:rowData.getNoteID()}">
</xp:attr>
</xe:this.rowAttrs>
渲染后的 html 看起来像这样:
渲染时触发 onColumnClick 事件
<a id="view:_id1:dynamicViewPanel1:0:_id3:_internalColumnLink" href="#" ...
您可以使用 thisEvent.target
在 onColumnClick 的 CSJS 代码中获取此 element/node。
从那里你 "walk" 向上 .parentNode
两次并获得具有属性 "noteId".
的元素 <tr ..>
最后,用.getAttribute("noteId")
读取属性。
这是您的示例,其中包含所有更改:
<xe:dynamicViewPanel
id="dynamicViewPanel1"
var="rowData"
indexVar="index">
<xe:this.data>
<xp:dominoView
var="view1"
viewName="testview">
</xp:dominoView>
</xe:this.data>
<xe:this.rowAttrs>
<xp:attr
name="noteId"
value="#{javascript:rowData.getNoteID()}">
</xp:attr>
</xe:this.rowAttrs>
<xp:eventHandler
event="onColumnClick"
submit="false">
<xe:this.script><![CDATA[
alert(thisEvent.target.parentNode.parentNode.getAttribute("noteId"));
]]></xe:this.script>
</xp:eventHandler>
</xe:dynamicViewPanel>
使用动态视图面板并尝试在客户端 JS 的 onColumnClick 事件中获取用户单击的行的 UNID 或 NoteID。但是,XPage 未加载并显示如下错误
执行 JavaScript 动作表达式时出错 脚本解释器错误,行=1,列=9:[ReferenceError] 'rowData' 未找到
JavaScript代码
1: rowData.getNoteID()
完整的XPage代码如下所示。有没有办法获取行信息的句柄来构建此事件处理程序?目标是使用客户端 JS 打开一个新选项卡以显示用户单击的文档。
霍华德
<xe:dynamicViewPanel
id="dynamicViewPanel1"
var="rowData"
indexVar="index">
<xe:this.data>
<xp:dominoView
var="view1"
viewName="testview">
</xp:dominoView>
</xe:this.data>
<xp:eventHandler
event="onColumnClick"
submit="false">
<xe:this.script><![CDATA[alert('#{javascript:rowData.getNoteID()}');]]></xe:this.script>
</xp:eventHandler></xe:dynamicViewPanel></xp:view>
您无法在 CSJS 代码中使用 alert('#{javascript:rowData.getNoteID()}')
计算行的 noteId,因为这是在服务器端执行的 在 所有行都呈现之前。
请改用 rowAttrs
属性。它允许您向呈现的 table 行添加属性。您将添加一个属性 "noteId":
<xe:this.rowAttrs>
<xp:attr
name="noteId"
value="#{javascript:rowData.getNoteID()}">
</xp:attr>
</xe:this.rowAttrs>
渲染后的 html 看起来像这样:
渲染时触发 onColumnClick 事件
<a id="view:_id1:dynamicViewPanel1:0:_id3:_internalColumnLink" href="#" ...
您可以使用 thisEvent.target
在 onColumnClick 的 CSJS 代码中获取此 element/node。
从那里你 "walk" 向上 .parentNode
两次并获得具有属性 "noteId".
<tr ..>
最后,用.getAttribute("noteId")
读取属性。
这是您的示例,其中包含所有更改:
<xe:dynamicViewPanel
id="dynamicViewPanel1"
var="rowData"
indexVar="index">
<xe:this.data>
<xp:dominoView
var="view1"
viewName="testview">
</xp:dominoView>
</xe:this.data>
<xe:this.rowAttrs>
<xp:attr
name="noteId"
value="#{javascript:rowData.getNoteID()}">
</xp:attr>
</xe:this.rowAttrs>
<xp:eventHandler
event="onColumnClick"
submit="false">
<xe:this.script><![CDATA[
alert(thisEvent.target.parentNode.parentNode.getAttribute("noteId"));
]]></xe:this.script>
</xp:eventHandler>
</xe:dynamicViewPanel>