基于一组键/值对生成对话框答案

【问题标题】：Generate a dialog based on a set of key/value pairs基于一组键/值对生成对话框
【发布时间】：2015-09-27 15:03:26
【问题描述】：

我正在处理现有的 UI，我需要进行一些修改。 UI 使用 freemarker 进行模板化。

HTML 页面中有一个部分是：

<td>
    <#if authRole?? && authRole == 'ADMIN' >
    <#if leaf.value??>
    <a href="#" data-toggle="modal" class="href-select" data-target="#addPropertyModal" itemprop="${leaf.strValue?html}" >${leaf.name}</a> 
    <#else>
    <a href="#" data-toggle="modal" class="href-select" data-target="#addPropertyModal" itemprop="" >${leaf.name}</a> 
    </#if>
    <#else>
    ${leaf.name}
    </#if>
</td>

在此处单击leaf.name 值会打开一个对话框，其中包含名称和值文本框。对话框的模式是这样的：

<div class="modal fade" id="addPropertyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Property</h4>
            </div>
            <div class="modal-body">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">Name</span>
                    <input type="text" id="newProperty"  name="newProperty" class="form-control" placeholder="name">
                    </div>
                    <br/>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">Value</span>
                        <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" id="savePropertyBtn" name="action" value="Save Property" class="btn btn-primary"/>
                    <input type="submit" id="updatePropertyBtn" name="action" value="Update Property" class="btn btn-primary"/>
                </div>
            </div>
        </div>
    </div>
</div>

这是js部分：

$(".href-select").click(function() {
                var propName = $(this).text();
                var propVal = $(this).attr('itemprop');
                $("#newProperty").attr('readonly', true);
                $("#newProperty").val(propName);
                $("#newValue").val(propVal);

                $("#savePropertyBtn").hide();
                $("#updatePropertyBtn").show();
            });

现在我的问题是我想在 leaf.strValue 中返回一个地图而不是一个字符串。而在对话框中，而不是这个

Name  : [    ]
Value : [    ]

我想要这个：

Name : [    ]
Key1 : [Value]
Key2 : [Value]

Name 是节点名称，Value 是节点值。但在我的用例中，节点 Value 包含许多我决定在 UI 中显示为列表的值。所以Key1是节点Value（是一个map）中的第一个key，[Value]是对应key的value。

请帮帮我。

编辑： 我也可以将节点值设为 JSON 字符串。所以在这种情况下，键和值应该是 JSON 中的键值对。所以我尝试了这个：

var json = JSON.parse(propVal, 'UTF-8');

并且能够获取 JSON 对象。但是现在我想让对话框通过iteration显示键值对（因为键值对不固定）。

【问题讨论】：

基于“我想要这个”看来你想要Name: value, Keys: [ key1: val1, key2: val2 ]
没有。实际上 Name 是节点名称，Value 是节点值。但在我的用例中，节点 Value 包含许多我决定在 UI 中显示为列表的值。所以Key1是节点Value（是一个map）中的第一个key，[Value]是对应key的value。
好的@ViChU。这是一个很好的总结——也许值得添加到问题中。

标签： javascript jquery html freemarker

【解决方案1】：

嗯，你需要，而不是 <div><span>Value</span><-input_field-/></div> 块，根据您的键/值以这种或另一种方式生成系列此类块。并且可能以类似的“数组”方式在 JS 中处理它们。

否则，我什么也说不出来，因为你什么也没说这个神秘的键/值数据集的形式和形状。

【讨论】：