Question

我正在处理现有的用户界面，我需要做一些修改。 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中返回地图而不是字符串。并在对话框bos中，而不是这个

Name  : [    ]
Value : [    ]

我想要这个：

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

Name是节点名称，Value是节点值。但在我的用例中，节点Value包含许多值，我决定将其显示为UI中的列表。因此Key1是节点Value中的第一个键（它是一个映射），[Value]是相应键的值。

请帮我解决这个问题。

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

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

并且能够获取JSON对象。但现在我希望对话框通过迭代显示键和值对（因为键值对不是固定的）。

Answer 1

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

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

根据一组键/值对生成对话框

1 个答案: