Как обновить ячейку таблицы данных через mdb-> websocket в jee-7? (дб рк, отображение идентификатора клиента) - PullRequest
Новая
       116

Как обновить ячейку таблицы данных через mdb-> websocket в jee-7? (дб рк, отображение идентификатора клиента)

0 голосов
/ 03 июля 2018

У меня есть jsf-2.2 primefaces с возможностью подкачки. В одном столбце отображается состояние сетевого компонента, и при загрузке таблицы я асинхронно запрашиваю внешнюю службу через адаптер ресурсов. Когда таблица данных загружена, ячейки состояния отображаются с «Статус неизвестен». Иногда я получаю пакеты состояния от отдельных компонентов сети как json в компоненте, управляемом сообщениями. Затем я хочу отправить этот статус через веб-сокет в браузер, чтобы обновить ячейки таблицы. Пакеты состояния json содержат первичные ключи базы данных сетевых компонентов, но на стороне javascript в браузере мне нужны clientIds ячеек таблицы данных. ClientIds имеют форму «switchTable: swths: 2: switchActive» и отличаются только индексом в середине.

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

Есть ли рекомендуемый способ сопоставить clientIds с отдельными первичными ключами? Это отображение должно включать сеанс, так как существует несколько сеансов с одним и тем же clientId. Я хочу обновить ячейку таблицы, которую я нашел в DOM, с document.getElementById сразу с текстом статуса.

1 Ответ

0 голосов
/ 18 июля 2018

Я придумал 2 решения этой интересной проблемы.

Раствор 1

  • определение скрытого столбца таблицы с текстом 'ID',
  • поиск строки и ячейки таблицы данных с использованием javascript путем итерации по всем строкам и сопоставления «значения» ячейки столбца ID

Решение 2

  • с использованием пространства имен JSF2 xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" для "программной" установки атрибута html id элементов ячейки столбца,
  • поиск элемента ячейки с функцией document.getElementById JavaScript
* * Пример тысяча двадцать-одина * * тысяча двадцать-дв

xhtml page 

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" 
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" >

    <f:view contentType="text/html">
        <h:head>
            <h:outputScript library="primefaces" name="jquery/jquery.js" />
        </h:head>

        <h:body>
            <p:dataTable id="dataTable" widgetVar="dataTableWidget" value="#{switchController.switches}" var="switch" paginator="true" rows="5">
                <p:column headerText="id" style="display:none">
                    <h:outputText value="#{switch.id}"/>
                </p:column>
                <p:column headerText="Name">
                    <h:outputText value="#{switch.name}"/>
                </p:column>
                <p:column headerText="status">
                    <h:outputText value="#{switch.status}" pt:id="dataTable:switch:#{switch.id}:status"/>
                </p:column>
            </p:dataTable>

            <p:commandButton value="Change status" type="button" onclick="changeStatusExample()"/>
        </h:body>
    </f:view>
</html>

Backing Bean (только для целей этого примера) 

public class SwitchController {

    List<Switch> switches;

    @PostConstruct
    public void init() {
        switches = new ArrayList<>();
        for (int i = 1; i < 11; i++) {
            switches.add(new Switch(i, "Switch " + i, "STATUS_UNKNOWN"));
        }
    }

    public List<Switch> getSwitches() {
        return switches;
    }

    public void setSwitches(List<Switch> switches) {
        this.switches = switches;
    }
}

, где Switch - это POJO с полями id, name и status.

Javascript 

// SOLUTION 1
function getTableCellByIdVer1(switchId, colNumber) {
    //get table rows
    var tableRows = PF('dataTableWidget').tbody[0].childNodes;
    //loop through rows    
    for (i = 0; i < tableRows.length; i++) {
        //get cells of current row
        var cells = tableRows[i].cells;
        //get value of hidden ID column cell
        var id = cells[0].innerText;
        if (id === switchId) {
            return tableRows[i].cells[colNumber];
        }
    }
    return null;
}

// SOLUTION 1
function changeSwitchStatusVer1(changedSwitch) {
    var statusCell = getTableCellByIdVer1(changedSwitch.id, 2);
    if (statusCell) {
        //row exists...now we can change the status
        statusCell.innerText = changedSwitch.status;
    } else {
        console.log('Row with switch id=' + changedSwitch.id + ' not found');
    }
}

// SOLUTION 2
function changeSwitchStatusVer2(changedSwitch) {
    //find cell element by html ID attribute given in xhtml
    var elementId='dataTable:switch:' + changedSwitch.id + ':status';
    var statusCell = document.getElementById(elementId);
    if (statusCell) {
        statusCell.innerText = changedSwitch.status;
    } else {
        console.log('Element with id=' + elementId + ' not found');
    }
}

// EXAMPLE
function changeStatusExample() {
    //simulating situation when websocket pushes info about changed switch to browser page
    // SOLUTION 1
    var changedSwitch = {id: '2', status: 'STATUS_ON'};
    changeSwitchStatusVer1(changedSwitch);

    // SOLUTION 2
    //another switch status changed..using another approach to update table cell
    changedSwitch = {id: '4', status: 'STATUS_OFF'};
    changeSwitchStatusVer2(changedSwitch);
}

ВАЖНО : обратите внимание, что оба решения будут работать только в том случае, если идентификаторы (измененного переключателя) являются частью видимой на данный момент страницы таблицы данных.

...