Чтобы получить номер строки выбранной строки primefaces datatable

У меня есть datatable primefaces, который мне нужно отобразить (выбранный номер строки) (общее количество строк) на странице JSF.Я мог бы получить номера строк, отображаемые в одном из столбцов, используя атрибут rowIndexVar, но я не получаю идеи отображать одни и те же номера отдельно во входном тексте при выборе строки.

что мне нужно сделать на странице JSF или управляемом компоненте, чтобы получить выбранный номер строки.

пожалуйста, помогите мне в этом вопросе.

ниже мой 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 ответов


Я считаю, что нет прямого способа сделать это. Хотя использование двух запросов ajax не очень красиво, вы можете по крайней мере достичь результата, который вы ожидаете при использовании простых PrimeFaces. Вы можете уменьшить это до одного вызова, если замените p:ajax с расширениями PrimeFaces pe:javascript который не делает туда и обратно на сервер

каждая строка (tr), отображаемая вашим datatable, имеет атрибут сведения-РК С вашим rowKey и другим атрибут data-ri С вашим значением rowIndexVar.

вы можете узнать сведения-РК атрибут через dtWidgetVar.выбор (dtWidgetVar-это имя widgetVar в вашем datatable).

теперь вы можете отправить indexRow в свою модель с помощью remoteCommand

вот код, который я использовал, чтобы проверить это:

Вид

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

теперь вы должны иметь возможность внести соответствующие изменения в свой код, чтобы использовать его.


Я удивлен сложным решением в другом ответе. Предполагая, что у вас есть #{workSpaceBean.lpInfoList} serverside при выполнении "select" вы можете легко сделать (код в соответствии с витриной PrimeFaces, адаптироваться в соответствии с вашими потребностями)

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

}