获取所选主要数据表行的行号

时间:2014-01-06 09:15:26

标签: jsf-2 primefaces datatable

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

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

请帮助我。

以下是我的JSF页面

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

2 个答案:

答案 0 :(得分:19)

我认为没有直接的方法可以这样做。虽然使用两个ajax请求并不漂亮,但至少可以达到使用普通PrimeFaces时所期望的结果。如果将p:ajax替换为不向服务器进行往返的PrimeFaces扩展程序pe:javascript,则可将此限制为一次调用

数据表呈现的每一行(tr)都有一个名为 data-rk 的属性,其中包含rowKey和另一个名为 data-ri 的属性,其中包含rowIndexVar值。

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

您现在可以使用remoteCommand

将indexRow发送到您的模型

以下是我用来测试它的代码:

视图

<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);
}

如果您使用复选框选择,则可以检索所选的索引,如下所示:

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}])
}

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

答案 1 :(得分:2)

我对另一个答案中的复杂解决方案感到惊讶。假设您在选择&#39;时有#{workSpaceBean.lpInfoList}服务器端,您可以轻松完成(根据PrimeFaces展示代码,根据您的需要进行调整)

<p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update="..." />
public void onRowSelect(SelectEvent event) {
    int rownum = cars.indexOf((Car)event.getObject());

}