Question

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

<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>

如你所见，为了突出显示graphicImage上的行，我必须添加这个js：

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

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

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

这里有什么问题？

Answer 1

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

onclick="clickParent(this)"

<script type="text/javascript">

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

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

primefaces单选数据表分页+ rowIndexVar

1 个答案: