【发布时间】：2014-04-18 02:43:35
【问题描述】：
我的目标是创建一个包含 N 行和 M 列的可编辑 HTML 表格。因此，我想提供一个解决方案，将 ONE 行的所有元素显示为可编辑，而其他行保持为简单的 outputText。到目前为止，如果我知道行的确切 ID，我可以显示隐藏字段。还有一个问题...我不知道 ID，因为您知道 JSF 会生成自己的 ID，而且我确实有 N（不特定数量）行。
这是我的 JSF/HTML 代码（Primefaces 也集成了）
<h:panelGroup id="table" layout="block" styleClass="ui-datatable ui-widget bearbeiten-ergebnisse__tabelle">
<table>
<thead>
<tr>
<th class="ui-state-default">
<h:outputText value="Editieren" />
</th>
<ui:repeat
var="column" value="#{AuswahlBean.selectedMetaDataVersionColums}">
<th class="ui-state-default">
<h:outputText value="#{func:getColumnNameSplit(column.header)}" escape="false"/>
</th>
</ui:repeat>
</tr>
</thead>
<tbody class="ui-datatable-data ui-widget-content">
<ui:repeat id="rowTable"
var="rows" value="#{AuswahlBean.selectedMetaDataVersionResultSet}">
<tr
id="#{component.clientId}"
class="ui-widget-content clickable-row">
<td class="row-operation">
<h:outputText styleClass="ui-row-edit" value="edit" />
<h:outputText styleClass="ui-row-save hide-field" value="save " />
<h:outputText styleClass="ui-row-cancel hide-field" value="cancel" />
</td>
<ui:repeat
var="column" value="#{AuswahlBean.selectedMetaDataVersionColums}">
<td>
<!-- Zelleninhalt, der nicht-editierbar ist -->
<h:outputText
value="#{rows[column.property]}"
styleClass="ui-outputfield"
rendered="#{column.typeText}"/>
<h:outputText
value="#{rows[column.property]}"
styleClass="ui-outputfield"
rendered="#{column.typeNumeric}" >
<f:converter converterId="DwhNumberConverter"/>
</h:outputText>
<h:outputText
value="#{rows[column.property]}"
styleClass="ui-outputfield"
rendered="#{column.typeDate}">
<f:converter converterId="DwhDateConverter"/>
</h:outputText>
<!-- Zelleninhalt, der nicht-editierbar ist -->
<p:inputText
rendered="#{column.typeText}"
value="#{rows[column.property]}"
styleClass="hide-field"
required="true"
requiredMessage="Überprüfungsfehler: Eine Eingabe wird erwartet."/>
<p:inputText
rendered="#{column.typeNumeric}"
value="#{rows[column.property]}"
styleClass="hide-field"
required="true"
requiredMessage="Überprüfungsfehler: Eine Zahl wird erwartet."
converter="DwhNumberConverter">
<p:ajax event="valueChange" async="TRUE"
update="@this :theForm:msg" />
</p:inputText>
<p:calendar
rendered="#{column.typeDate}"
value="#{rows[column.property]}"
styleClass="calendar-inputfield hide-field"
pattern="dd.MM.yyy"
required="true"
requiredMessage="Ein Datum wird erwartet. Bitte geben Sie in Datum im Format tt.mm.jjjj an."
converter="DwhDateConverter">
<p:ajax event="valueChange" async="TRUE"
update="@this :theForm:msg"/>
</p:calendar>
</td>
</ui:repeat>
</tr>
</ui:repeat>
</tbody>
</table>
</h:panelGroup>
这里是 JavaScript 代码段。
<script type="text/javascript">
// Show the editable Row
$('.ui-row-edit').click(function(event){
var editableRowId = $(this).closest('tr').attr('id');
var fixedIdForJquerySelector = editableRowId.replace(/\:/g, '\\\\:');
showInputFields(fixedIdForJquerySelector);
});
function showInputFields(rowID) {
alert(rowID);
$("#"+rowID+" .ui-outputfield").css("color","red");
/* $('#' + rowID + ' .ui-inputfield').removeClass('hide-field');
$('#' + rowID + ' .calendar-inputfield').removeClass('hide-field');
$('#' + rowID + ' .ui-outputfield').addClass('hide-field');
$('#' + rowID + ' .ui-row-edit').addClass('hide-field');
$('#' + rowID + ' .ui-row-save').removeClass('hide-field');
$('#' + rowID + ' .ui-row-cancel').removeClass('hide-field'); */
}
</script>
出于任何原因，ID 表达式不被接受为 jQuery 选择器。或者更准确地说，错误在于冒号后面的任何内容（在正则表达式“：”中）都被读取为 CSS 伪类。以下是firefox控制台的错误信息：
错误：语法错误，无法识别的表达式：不支持的伪：rowTable\
如果我像这样硬编码相同的选择器 (ID)，有人可能会认为这是常规行为
$("#theForm\\:rowTable\\:0 .ui-outputfield").css("color","red");
而不是
$("#"+rowID+" .ui-outputfield").css("color","red");
我会得到想要的行为。
直奔主题： a) 有谁知道为什么选择器不起作用？ b) 有没有人有其他解决方案来编辑包括转换器在内的单行？
提前致谢！
解决方案
@Denish 帮助下的 jQuery 解决方案。 尽管我仍然不知道为什么行 ID 不被接受为 jQuery 选择器（任何提示，仅用于背景知识？）。
$('.ui-row-edit').click(function(event) {
var editableRow = $(this).closest('tr');
showInputFields(editableRow);
});
function showInputFields(rowObject) {
rowObject.find('.ui-inputfield').toggleClass('hide-field');
rowObject.find('.ui-outputfield').toggleClass('hide-field');
// and so on for all necessary CSS-classes
}
【问题讨论】：
-
你是否对特定行中的每个 td 都有唯一的 id
-
@Dinesh 最初我没有为
或 标签设置任何 ID。对于 -标签，我使用 clientID 来更简单地控制所需行。但是，如果有没有设置 ID 的解决方案，我将不胜感激。另一方面，如果您的解决方案依赖于 -tags 的 ID，那么您可以确定 JSF 会执行此操作，或者我使用与 -tag id="#{component.clientId}"相同的解决方案。k 朋友我无法理解你的问题，但我很厚，而用户可以点击 td 然后你需要显示文本框并捕获值可能我是对的@Dinesh 部分你是对的。如果用户点击一行（或行中的一个元素），整行应该是可编辑的（显示输入字段），捕获新值，转换并验证它们，最后保存所有。只做一件事你隐藏输入类型字段，而用户点击你可以显示文本框你想要这个代码
标签： jquery html jsf-2 primefaces