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

时间:2015-07-09 09:53:08

标签: javascript jquery html freemarker

我正在处理现有的用户界面,我需要做一些修改。 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对象。但现在我希望对话框通过迭代显示键和值对(因为键值对不是固定的)。

1 个答案:

答案 0 :(得分:0)

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

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