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

Question

我正在处理现有的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中的第一个键(它是一个映射),并且[Value]是相应键的值.

请帮帮我.

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

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

并能够获得JSON对象.但现在我希望对话框通过迭代显示键和值对(因为键值对不是固定的).

Answer 1

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

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