素数单选数据表分页 + 行索引变量

primefaces single selection datatable pagination + rowIndexVar

本文关键字：索引 变量 分页 单选 数据表      更新时间：2023-09-26

我有一个数据表，其中包含包含图像的列。 

<p:dataTable id="tabexam"
             lazy="true"
             paginatorPosition="bottom"
             var="exam"
             value="#{dyna.lazyModel}"
             widgetVar="examTable"
             emptyMessage="No results"
             paginator="true"
             rows="#{dyna.rows}" 
             selection="#{dyna.selectedExamen}"
             rowKey="#{exam.studyUid}"
             selectionMode="single"
             rowIndexVar="rowx"
             resizableColumns="false"  
             draggableColumns="true"
             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  >

在简单文本列上，当您选择一行时，它会被正确选中并突出显示。

问题出在包含 p：graphicimage 的列上：

<p:column headerText="#{column.userListname}"
          sortBy="#{column.dbname}"
          filterBy="#{column.dbname}"
          filterMatchMode="exact" 
          style="#{column.visible==true? 'text-align:center!important;vertical-align: middle!important;':'display:none!important;'}"
          width="#{column.visible==true? 16:0}"
          resizable="#{column.visible==true? column.resizable:false}" 
          rendered="#{column.dbname == 'studyPatientState'}">
           <p:graphicImage value="/images/study_State_icons/#{exam.studyPatientState}.png" styleClass="imagero"
                          onclick="examTable.unselectAllRows();
                                        examTable.selectRow(#{rowx});"/>
</p:column>

如您所见，为了在图形图像单击上突出显示行，我不得不添加以下js：

onclick="examTable.unselectAllRows();examTable.selectRow(#{rowx});"

问题是当我切换到另一个页面时，这些 js 函数停止工作。

我注意到，为了使其正常工作，我需要为每个页面重置 rowIndexVar，但是如何实现这样的事情。

我在这里做错了什么？

这里还有一个使用 JQuery 的替代方案，试试这个。

onclick="clickParent(this)" 

<script type="text/javascript">
   function clickParent(imgElement){
     var tdElement = $(imgElement).parents("td");
     $(tdElement).click()
   }
</script>

上述方法会将 Image 元素发送到 fuinction，该函数将搜索父级，直到它到达 TD 元素并在td上调用 click 事件。

相关文章：