如何通过jee-7中的mdb-> websocket更新数据表单元格？(db，clientId映射)
我有一个带有分页的jsf-2.2 primefaces。有一列显示网络组件的状态，并在表加载时通过资源适配器异步查询外部服务。当数据表加载时，状态单元格将显示为“状态未知”。偶尔，我会在消息驱动Bean中作为json从单个网络组件接收状态包。然后，我希望通过websocket将此状态发送到浏览器，以更新表格单元格。json状态包包含网络组件的主数据库密钥，但在浏览器中的javascript端，我需要数据表单元格的clientIds。clientIds具有"switchTable:swths:2:switchActive“的形式，并且只在中间的索引上有所不同。
我的第一个想法是编写一个facelet并用网络组件的主键覆盖id，但我认为这不是正确的方法。
是否有推荐的方法将clientIds映射到各个主键？此映射需要包括会话，因为有多个具有相同clientId的会话。我想更新我在DOM中找到的带有状态文本的document.getElementById中的表格单元格。
回答 1
Stack Overflow用户
发布于 2018-07-18 14:25:18
我想出了两个解决这个有趣问题的方法。
解决方案1
- 定义包含“ID”文本的隐藏表列，
- 通过遍历所有行并匹配ID列单元格的“值”，使用javascript查找数据表行和单元格
解决方案2
- 利用JSF2命名空间
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"“编程”设置列单元格元素的htmlid属性， - 用javascript的
document.getElementById函数查找单元元素
示例
xhtml页面
<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>支持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是带有id、name和status字段的POJO。
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);
}重要的：请注意，这两种解决方案只有在(更改的开关)ID是当前“可见”数据表页面的一部分时才能工作。
https://stackoverflow.com/questions/51158107
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号