获取所选素面数据表行的行号 [英] To get the row number of the selected primefaces datatable row

问题描述

我有一个 primefaces 数据表，我需要在 JSF 页面中显示(选定的行号)(总行数).我可以使用 rowIndexVar 属性获取显示在其中一列的行号，但我没有得到任何在行选择的输入文本中分别显示相同数字的想法.

I have a primefaces datatable i need to display (selected row number) of (total number of rows) in the JSF page.I could get the row numbers displayed in one of the columns using rowIndexVar attribute but i am not getting any idea to display the same numbers separately in the input text on row select.

我需要在 JSF 页面或托管 bean 中做什么才能获得选定的行号.

What should i need to do in JSF page or managed bean to get selected row number.

请在这方面帮助我.

下面是我的 JSF 页面

Below is my JSF page

<p:dataTable id="workSpaceList" var="data"
            value="#{workSpaceBean.lpInfoList}" widgetVar="multiSelection"
            selection="#{workSpaceBean.selectedRows}" resizableColumns="true"
            liveScroll="true" scrollRows="55" scrollWidth="85%"
            scrollHeight="81%" styleClass="datatable" 
            scrollable="true" rowIndexVar="rowIndex"
            filteredValue="#{workSpaceBean.filteredWorkSpaceItems}">

            <p:column selectionMode="multiple" style="width:3%" />
            <p:column headerText="#" style="width:3%">
                #{rowIndex+1}
            </p:column>
            <p:column headerText="Insured" filterBy="#{data.insuredName}"
                sortBy="#{data.insuredName}" style="width:24%">
                <h:outputText value="#{data.insuredName}" />
                <!--   style="width:250px" -->
            </p:column>

            <p:column headerText="City" filterBy="#{data.custAddress_City}"
                sortBy="#{data.custAddress_City}" style="width:12%">
                <h:outputText value="#{data.custAddress_City}" />
            </p:column>
            .
            .
            .
            .

        </p:dataTable>

推荐答案

我相信没有直接的方法可以做到这一点.虽然使用两个ajax请求并不漂亮，但至少可以达到使用普通PrimeFaces时所期望的结果.如果将 p:ajax 替换为 PrimeFaces 扩展pe:javascript 不会往返服务器

I believe that there's not a straight forward way to do so. Although using two ajax requests is not pretty, you can at least achieve the result you expect when using plain PrimeFaces. You can reduce this to one call if you replace the p:ajax with the PrimeFaces extensions pe:javascript which does not do a roundtrip to the server

数据表呈现的每一行 (tr) 都有一个名为 data-rk 的属性，带有您的 rowKey，另一个名为 data-ri 的属性带有您的 rowIndexVar 值.

Every row (tr) rendered by your datatable has a attribute called data-rk with your rowKey and another attribute called data-ri with your rowIndexVar value.

您可以通过 dtWidgetVar.selection 获取 data-rk 属性(dtWidgetVar 是数据表中的 widgetVar 的名称).

You can get the data-rk attribute through dtWidgetVar.selection (dtWidgetVar is the name of the widgetVar in your datatable).

您现在可以使用 remoteCommand 将 indexRow 发送到您的模型

You can now send the indexRow to your model using a remoteCommand

这是我用来测试它的代码:

Here is the code I used to test it:

视图

<p:remoteCommand name="displayIndex" process="@this" update="index" actionListener="#{viewMBean.displayRowIndex}"/>

<p:dataTable id="dt" var="data"
             value="#{viewMBean.dataModel}" 
             selection="#{viewMBean.selectedRow}"
             selectionMode="single"
             widgetVar="dtVar"
             rowIndexVar="index">
    <p:ajax event="rowSelect" 
            oncomplete="displayIndex([{name:'index', value:jQuery('tr[data-rk=' + dtVar.selection + ']').attr('data-ri')}])" process="@this" />
    <p:column headerText="#">
        #{index + 1}
    </p:column>
    <p:column headerText="Dados">
        #{data.name}
    </p:column>
</p:dataTable>
<br />
Row Index: <p:inputText id="index" value="#{viewMBean.index}" />

托管 Bean

public void displayRowIndex() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map map = context.getExternalContext().getRequestParameterMap();
    String pIndex = (String) map.get("index");
    index = Integer.parseInt(pIndex);
}

如果您使用复选框选择，您可以像这样检索选定的索引:

In case you are using checkbox selection, you can retrieve the selected indexes like this:

function beforeDisplayingIndexes(){
    var indexes = "";
    jQuery("tbody .ui-chkbox-box").each(function(){
      if (jQuery(this).hasClass("ui-state-active")){
        indexes = indexes + (indexes === "" ? "" : ",") + jQuery(this).closest("tr").attr("data-ri");
      }
    });
    //for debuging only
    console.log(indexes);
    displayIndex([{name:'index', value:indexes}])
}

您现在应该能够对代码进行适当的修改以利用它.

You should now be able to make the proper modification to your code to make use of that.

这篇关于获取所选素面数据表行的行号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！