根據一組鍵/值對生成對話框

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中處理它們。

否則，我不能說什么，因為你沒有說出這個神秘的鍵/值數據集的形式和形狀。