我有一个这样的课:
public class MyClass {
private Map<String, String> properties = new HashMap<String, String>();
}
我需要一个用户可以在属性映射中添加键值对的表单。我在此找到的所有SO答案都只是说明如何使用已知的键来输入值,方法是:
<form:input path="properties['keyName']" />
如何使 key 也可编辑?我喜欢...
<form:input path="properties.key" /><form:input path="properties.value" />
最佳答案
我开始工作了,不得不再次找到此页面来提供我的答案。
我正在向<form>
动态添加键和值映射,而我的解决方案有一个键输入和一个单独的值输入。然后,我在键上注册了一个更改监听器,以更新值输入上的name
。
对我来说,困难的部分是JQuery无法访问动态添加的键/值元素的ID。这意味着,如果已经填充了映射,则可以毫无问题地使用JQuery,但是如果它是新条目,则我将遇到问题,并且对值输入的ID进行搜索将失败。
为了解决这个问题,我必须本质上遍历DOM以获得值输入。这是我的代码JSP代码。
<c:forEach var="points" items="${configuration.pointsValueMap}" varStatus="index">
<div class="col-xs-3 ">
<label for="pointMap[${index.index}]">Type:</label>
<input type="text" id="pointMap[${index.index}]" class="pointMap" value="${points.key}"> :
</div>
<div class="col-xs-3 ">
<label for="pointMap[${index.index}]-value">Value:</label>
<input type="text" id="pointMap[${index.index}]-value" name="pointsValueMap[${points.key}]" value="${points.value}">
</div>
</c:forEach>
这是我的JS,用于更新名称路径的值。
/**
* Register a listener on the form to detect changing the map's key
*/
$('form').on('change', 'input.pointMap', function(){
var content = $(this).val();
var id = $(this).attr('id');
// have to travel the DOM for added elements to be accessed.
// JQuery does not have visibility to the IDs of added elements
$(this).parent().next().children('input').attr('name', 'pointsValueMap['+content+']');
// if you are not dynamically adding key/values then
// all fields are accessible by JQuery and you can update by:
$('#'+id+'-value').attr('name', 'pointsValueMap['+content+']');
});