Question

我有一个应用程序，我经常需要动态添加/删除表单中域对象的一对多关系中的字段组。字段可以是文本字段，选择，单选按钮等。我找不到任何简单的方法来执行此操作。

为此，根据我的最佳解决方案是使用我的grails标签将div渲染为javascript字符串并在表单上添加删除div。例如
点击添加

var vector = $.parseHTML('<div><label>Vector:</label><g:select from="${..}" /><g:text......');
$("#vectorDiv").append(vector);

但由于各种原因，方法不起作用。一个是javascript不允许字符串中的换行符（没有/最后我不能用grails标签强制执行）。

我还不想开始使用React。只是jquery和grails标签。

如果愿意的话，我想对这种“设计模式”有所了解。在我的gsp中渲染一个div。

<!--templates-->
<div id="templates" hidden>
    <div id="templateAccessoryVector" class="form-group accessoryVector">
        <div class="col-sm-4">
            <g:select class="form-control" name="accessoryVectorsTemplate.vectorId"
                      from="${Vector.getAccessoryVectors()}" optionKey="id" optionValue="alias" />
        </div>
        <label class="control-label col-sm-2">Percentage:</label>
        <div class="col-sm-2 input-group">
            <g:textField class="form-control text-right" name="accessoryVectorsTemplate.percentage" />
            <span class="input-group-addon">%</span>
        </div>
    </div>
</div>

然后在javascript中

var templateAccessoryVectorDiv = $("#templateAccessoryVector").removeAttr('id');

function addAccessoryVector(){
    var newAccessoryVectorDiv = templateAccessoryVectorDiv.clone();

    $("[name^='accessoryVectorsTemplate']", newAccessoryVectorDiv).each (function(index, element) {
        element.name = element.name.replace('accessoryVectorsTemplate', 'accessoryVectors[' + accessoryVectors + ']');
    });

    newAccessoryVectorDiv.appendTo($("#accessoryVectors"));
    accessoryVectors++;
}
//add, remove functions

所有这些模板都可以存在于模板部分，隐藏并在需要时使用。

Answer 1

何时必须动态添加/删除这些字段？如果是在请求之后，您可以使用Ajax执行此请求，然后根据响应（例如200），将这些字段附加到Ajax回调的页面上。或者，不是使用JS创建HTML元素，而是可以使用gsp模板（例如_fields），然后与控制器的响应一起发送，例如：<html><head> <style> div.block.active { opacity: 1 } .block {opacity:0; background:black; width:150px; height:150px} </style> <script src=jquery.js></script> </head><body style="height:2500px"> <div id=block1 class=block></div> <div id=block2 class=block></div>  <script> var blocks = { // your blocks 1: { min: 100, // first block min height max: 200 // first block max height }, 2: { min: 200, // second block min height max: 300 // second block max height } // And so on /* N: { min: height, max: height } */ } var blocks_c = 0; var j; for (j in blocks) { if (blocks.hasOwnProperty(j)) { blocks_c++; } } $(window).scroll(function () { for (var i = 1; i <= blocks_c; i++) { var t = $(window).scrollTop(); if (t > blocks[i].min && t < blocks[i].max) { $('div.block').removeClass('active'); $('div#block' + i).addClass('active'); } } }); </script> </body></html>

我希望它可以帮助你：）

祝你好运！

Answer 2

我认为最好的解决方案可能是标签库。您可以为每个字段添加标记。从控制器中，您可以通过选项卡进行渲染，在GSP中，您可以相应地使用标记。

通过这种方式，你可以支持g：标签和javascript（如果有的话）。

了解如何创建自定义代码：link1和link2

GSP片段替代Grails中的javascript用法

2 个答案: