免责声明:我不知道使用 grails 时以下方法是否有效。稍后告诉我。
See 动态表单的更好方法。作者说:
为了添加 LineItems,我有一些 js 来计算新索引并将其添加到 DOM 中。删除 LineItem 时我必须重新编号所有索引这就是我想避免的
所以我做什么
我有一个存储下一个索引的变量
var nextIndex = 0;
加载页面时,我执行一个 JavaScript 函数,该函数计算集合有多少个子项并配置 nextIndex 变量。您可以使用 JQuery 或 YUI,随意。
静态添加子项
我创建一个存储模板的变量(注意{index})
var child = "<div>"
+= "<div>"
+= "<label>Name</label>"
+= "<input type="text" name=\"childList[{index}].name\"/>"
+= "</div>"
+= "</div>"
当用户点击添加孩子按钮,我替换{index}- 通过使用正则表达式 - 通过存储在 nextIndex 变量中的值并加一。然后我添加到 DOM
也可以看看使用 Javascript 动态添加和删除 HTML 元素
动态添加子项
Here你可以看到 Paolo Bergantino 解决方案
通过删除
但我认为这是删除时出现的问题。无论您删除多少个子级,都不会触及 nextIndex 变量。看这里
/**
* var nextIndex = 3;
*/
<input type="text" name="childList[0].name"/>
<input type="text" name="childList[1].name"/> // It will be removed
<input type="text" name="childList[2].name"/>
假设我删除子列表1我做什么 ???我应该重新编号所有索引吗???
在服务器端我使用 AutoPopulatedList。因为子列表1已被删除,自动填充列表将其处理为 null。所以在初始化时我做
List<Child> childList = new AutoPopulatingList(new ElementFactory() {
public Object createElement(int index) throws ElementInstantiationException {
/**
* remove any null value added
*/
childList.removeAll(Collections.singletonList(null));
return new Child();
}
});
这样,我的集合只包含两个子项(没有任何空值)和我不需要对客户端的所有索引重新编号
关于添加/删除你可以看这个link我展示了一个场景,可以给您一些见解。
也可以看看Grails UI 插件