动态视图面板和 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>