Question

我有一个这样的对象：

var settings = {
    Name: "Fairy Tail",
    Feature:
    {
        Translate: true,
        Share: true
    }
}

表格

<form>
    <input type="text" name="Name" />
    <input type="checkbox" name="Feature.Translate" />
    <input type="checkbox" name="Feature.Share" />
</form>

如何让对象“自动”填充表单（不用手动设置每个字段的值）？

Answer 1

您可以这样做（jsfiddle为更复杂的示例），假设您先设置settings变量：

var assignValue = function(n, v){
    var field = jQuery('form input[name="'+n+'"]');
    if (field.attr('type')=='text'){
        field.val(v);
    } else if (field.attr('type')=='checkbox') {
        field.prop('checked',v);
    }
}

var assignSettings = function(list, prefix){
    if (typeof prefix != 'undefined'){
        prefix += '.';
    }else{
        prefix = '';
    }
    for (item in list){
        if ((typeof list[item]=='string')||(typeof list[item]=='boolean')){
            assignValue(prefix+item,list[item]);
        }else if(typeof list[item]=='object'){
            var n1 = item;
            assignSettings(list[n1],prefix+n1);
        }
    }
}

assignSettings(settings);

此解决方案并不像我迄今为止看到的版本中的其他解决方案那样受限制 - 它支持您提供的案例，并且可以轻松扩展以支持不同类型的字段和更多级别。

Answer 2

var inputs = $('form input[type="checkbox"]');

$.each(settings.Feature, function(key, val) {
    inputs.filter('[name="Feature.' + key + '"]')[0].checked = val;
});

示例： http://jsfiddle.net/9z928/

如果您还希望填写文本字段：

var inputs = $('form input');

inputs.first().val( settings.Name );

$.each(settings.Feature, function(key, val) {
    inputs.filter('[name="Feature.' + key + '"]')[0].checked = val;
});

示例： http://jsfiddle.net/9z928/1/

Answer 3

值得尝试一下：http://www.keyframesandcode.com/resources/javascript/jQuery/demos/populate-demo.html

Answer 4

您可以使用此JavaScript库将Object映射到表单字段名称，反之亦然。 Object-Form-Mapping

如何将对象映射到表单字段？

4 个答案: