Question

我将所有数据保存在map中，现在无法从单独的JS文件中访问它们。

在我的（索引）页面上，我有2个表格。 LHS表显示可用指令列表，RHS将显示所选指令的所有详细信息。

换句话说，当用户点击LHS表上的ID＃1时，RHS表将仅显示ID号的所有说明信息。

我在LHS表的ID中添加了onclick函数。 index.gsp中的代码：

<tbody>
        <g:each in="${deliveryInstructions}">                           
            <tr>
                <td id="instruction_ID">
                    <a href="#" onclick="display_DI_details(${it.id})">${it.id}</a>
                </td>
                <td>${it.deliveryName}</td>
                <td>${it.bankName}</td>
                ...
                ...
                ...
            </tr>
        </g:each>
</tbody>

在我的JS文件中（从here获得了JSON的想法）：

function display_DI_details(id) {
    var deliveryID = id; 
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};

    document.getElementById('diName').innerHTML = ${deliveryInstructions.deliveryName}
    document.getElementById('diID').innerHTML = ${deliveryInstructions.id}
    document.getElementById('fundingAccount').innerHTML = ${deliveryInstructions.fundingAccountNumber}
    ...
    ...
    ...
    document.getElementById('beneficiary').innerHTML = ${deliveryInstructions.beneficiary}
    document.getElementById('comments').innerHTML = ${deliveryInstructions.comments}
}

document.getElementById("display-di-list").innerHTML = display_DI_details(id);

再次在index.gsp这就是我对RHS表的看法......

<div id="display-di-list">
    <!-- <g:each in="${deliveryInstructions}"> -->
        <label>Delivery Name: <p class="receiptData" id="diName"></p></label>
        <label>Delivery ID: <p class="receiptData" id="diID"></p></label>
        <label>Funding Account: <p class="receiptData" id="fundingAccount"></p></label>
        ...
        ...
        ...
        <label>Beneficiary: <p class="receiptData" id="beneficiary"></p></label>
        <label>Comments: <p class="receiptData" id="comments"></p></label>
    <!-- </g:each> -->
</div>

最后在controller文件中：

def index() {
    [deliveryInstructions: DeliveryInstruction.list()]
}

现在我无法连接几个点来完成此操作。在我的JS文件中，如何使其仅获取传递的ID的参数值（在这种情况下，ID编号为1）？非常感谢您的帮助和帮助;时间！！

Answer 1

Grails对象变为Javascript变量：

var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};

为我生成无效的json，我相信差异（如果你的方式有效）与使用的grails版本有关。我幸运地围着encodeAsJson用一个标签指示grails不能逃脱引号：

<g:applyCodec encodeAs="none">
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};
</g:applyCodec>

如果您的方式已经有效，请忽略此问题，您可以通过查看生成的HTML进行验证。

<小时/> 在你的函数中，如果你有id和对象数组deliveryInstructions，你可以使用javascript函数来获取数组中的匹配元素

var matchingDeliveryInstruction = deliveryInstructions.find(function(element){
    return element.id == id;
});

现在，只需使用matchingDeliveryInstruction设置右侧的html：

document.getElementById('diName').innerHTML = matchingDeliveryInstruction.deliveryName;
document.getElementById('diID').innerHTML = matchingDeliveryInstruction.id;
...
etc.

我很喜欢使用.js库来做这样的事情，但是根据你的项目有多大可能会有点过分。

其他：再次查看您的问题后，您提到了一个单独的.js文件。 ${...}仅适用于您的gsp。你可以保留你的外部.js文件（一个很好的做法），但你需要在你的gsp中有这个：

<script>
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()};
</script>

根据生成的内容，您可能还需要使用<g:applyCodec encodeAs="none">对其进行换行。现在，这将创建一个可在外部文件中访问的全局deliveryInstructions变量。

从Javascript文件访问控制器值（映射）

1 个答案: