我有一个 PrimeFaces (3.5) DataTable
其中包含一些带有 <p:cellEditor>
的列像往常一样,其中多行的选择由 selectionMode="multiple"
启用.
当我单击一行中的一个单元格时 包含 <p:cellEditor>
,该行仅不时被选中。仅当单击靠近单元格边框的填充区域时,才能选择行。当单击中间该单元格的实际文本时,不进行选择,该文本实际上由 <p:cellEditor>
括起来。 .
这不会发生,当 <p:cellEditor>
被解雇。
在我的情况下,以这种方式选择一行是必不可少的,因为通过右键单击要删除的行,使用上下文菜单删除一行,与 this 完全相同。展示示例(该示例工作正常,因为它没有 <p:cellEditor>
。我没有找到同时使用行选择和单元格编辑器的展示示例)。
这个问题是 reported它的状态是“WontFix”。他们说,
Cell and Row selection at same time is not supported.
但是将框架从 3.5 降级确实有效(因此,上面的引用应该只是错误的并且似乎被误解了)但这不是解决方案。有人遇到过这个问题吗?有没有办法改变这种行为?
最佳答案
嗯,已经4年了,还没修好。但是 - 你可以使用一些 JS 魔法来让它工作。
首先定义按索引选择数据表行的JS函数:
<script>
function selectCurrentRow(index) {
var table = PF('myTableWidgetVar');
table.unselectAllRows();
table.selectRow(index, false);
}
</script>
然后使用 rowIndexVar 属性集定义您的数据表:
<p:dataTable id="myTable" widgetVar="myTableWidgetVar" var="parameter"
value="#{serviceMB.parameters}"
rowIndexVar="rowIndex"
rowKey="#{parameter.id}"
selectionMode="single"
editMode="cell">
并将 cellEditor 字段包装在一个定义了 onclick 函数的 div 中:
<p:column>
<p:cellEditor>
<f:facet name="output">
<div onclick="selectCurrentRow(#{rowIndex});">
<p:outputLabel value="#{parameter.value}"/>
</div>
</f:facet>
<f:facet name="input">
<div onclick="selectCurrentRow(#{rowIndex});">
<p:inputText value="#{parameter.value}"/>
</div>
</f:facet>
</p:cellEditor>
</p:column>
如果您使用行分组数据表(行索引将被移动),则此 hack 将无法正常工作。
编辑:
如果您使用行分组数据表,请使用此函数:
function selectByRowKey(rowKey, table) {
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows.get(i);
if (row.getAttribute("data-rk") === rowKey) {
table.unselectAllRows();
table.selectRow(i, false);
break;
}
}
}
其中 table = PF('myTableWidgetVar') 和 rowKey 是当前选择的 rowKey(例如 '#{parameter.id}')。
关于jsf - 在 PrimeFaces DataTable 中使用单元格编辑器选择行使得选择行变得困难,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17160667/