我想知道如何使用JSON来填充表单？使用jQuery和JSON来填充表单？
我有一个JSON字符串，我得到使用PHP的json_encode() 而我想使用JSON字符串来填充表单控件（如textarea或文本输入）。
如何在不使用外部插件的情况下实现这样的事情（如我看到的jQuery插件插件）。
编辑：JSON格式：
[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]
这是我从json_encode得到（）
有这里textarea的一个问题，那么我将其更改为默认开关值
使用此值分配给多个控件：
function populate(frm, data) {
$.each(data, function(key, value) {
var ctrl = $('[name='+key+']', frm);
switch(ctrl.prop("type")) {
case "radio": case "checkbox":
ctrl.each(function() {
if($(this).attr('value') == value) $(this).attr("checked",value);
});
break;
default:
ctrl.val(value);
}
});
}
对于刚刚文本控件（即没有收音机或复选框），你可以做一个填入的简单版本功能：
function populate(frm, data) {
$.each(data, function(key, value){
$('[name='+key+']', frm).val(value);
});
}
用例：
populate('#MyForm', $.parseJSON(data));
这会变得非常复杂。最好使用一个工具来解析你的JSON。你可以很容易地创建简单的表单，但你仍然需要解析它。
检查这个插件了，而不是： http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/
或者您可以使用EXT4。
对于奇怪，但有效的JSON语法像
[{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>},
{'name':<field_name>,'value':<field_value>}]
看看这个http://jsfiddle.net/saurshaz/z66XF/
我们在应用程序中使用了这种奇怪的语法，我们通过编写上面的逻辑来解决这个问题。
代码添加在https://github.com/saurshaz/jquery.jquery-json2form.js.git – saurshaz
谢谢Nowshath。它为我工作。我在您的版本中添加了一个额外的支票，以便能够填充选择选项。
function populateForm(frm, data) {
$.each(data, function(key, value){
var $ctrl = $('[name='+key+']', frm);
if($ctrl.is('select')){
$("option",$ctrl).each(function(){
if (this.value==value) { this.selected=true; }
});
}
else {
switch($ctrl.attr("type"))
{
case "text" : case "hidden": case "textarea":
$ctrl.val(value);
break;
case "radio" : case "checkbox":
$ctrl.each(function(){
if($(this).attr('value') == value) { $(this).attr("checked",value); } });
break;
}
}
});
};
几乎没有改善（除单选按钮）：
function resetForm($form)
{
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}
function populateForm($form, data)
{
resetForm($form);
$.each(data, function(key, value) {
var $ctrl = $form.find('[name='+key+']');
if ($ctrl.is('select')){
$('option', $ctrl).each(function() {
if (this.value == value)
this.selected = true;
});
} else if ($ctrl.is('textarea')) {
$ctrl.val(value);
} else {
switch($ctrl.attr("type")) {
case "text":
case "hidden":
$ctrl.val(value);
break;
case "checkbox":
if (value == '1')
$ctrl.prop('checked', true);
else
$ctrl.prop('checked', false);
break;
}
}
});
};
我发现原来剧本没有发挥好与阵列[]因为在名称选择失踪引号的名称：
var $ctrl = $('[name="'+key+'"]', frm);
如果有人想从多维json格式中填充，比如$ .serializeJSON [https://github.com/marioizquierdo/jquery.serializeJSON]的结果，那么这里有一个函数可以转换为平面格式。
populateForm($form, json2html_name_list(json))
通过以上虽然所有的例子：：
function json2html_name_list(json, result, parent){
if(!result)result = {};
if(!parent)parent = '';
if((typeof json)!='object'){
result[parent] = json;
} else {
for(var key in json){
var value = json[key];
if(parent=='')var subparent = key;
else var subparent = parent+'['+key+']';
result = json2html_name_list(value, result, subparent);
}
}
return result;
}
与上面的功能USECASE示例
var $ctrl = $('[name='+key+']', frm);
需要被改变到
var $ctrl = $('[name="'+key+'"]', frm);
防止语法错误与jQuery
记录列表数组必须用数字（例如，水果[0]，而不是水果[]）以便使用此功能。
我有同样的问题，并已进一步开发上面显示的版本。现在可以有单独的返回值的复选框以及返回一个名称数组的组。 编码经过测试，使用并正常工作。
function populateForm($form, data)
{
//console.log("PopulateForm, All form data: " + JSON.stringify(data));
$.each(data, function(key, value) // all json fields ordered by name
{
//console.log("Data Element: " + key + " value: " + value);
var $ctrls = $form.find('[name='+key+']'); //all form elements for a name. Multiple checkboxes can have the same name, but different values
//console.log("Number found elements: " + $ctrls.length);
if ($ctrls.is('select')) //special form types
{
$('option', $ctrls).each(function() {
if (this.value == value)
this.selected = true;
});
}
else if ($ctrls.is('textarea'))
{
$ctrls.val(value);
}
else
{
switch($ctrls.attr("type")) //input type
{
case "text":
case "hidden":
$ctrls.val(value);
break;
case "radio":
if ($ctrls.length >= 1)
{
//console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
$.each($ctrls,function(index)
{ // every individual element
var elemValue = $(this).attr("value");
var elemValueInData = singleVal = value;
if(elemValue===value){
$(this).prop('checked', true);
}
else{
$(this).prop('checked', false);
}
});
}
break;
case "checkbox":
if ($ctrls.length > 1)
{
//console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
$.each($ctrls,function(index) // every individual element
{
var elemValue = $(this).attr("value");
var elemValueInData = undefined;
var singleVal;
for (var i=0; i<value.length; i++){
singleVal = value[i];
console.log("singleVal : " + singleVal + " value[i][1]" + value[i][1]);
if (singleVal === elemValue){elemValueInData = singleVal};
}
if(elemValueInData){
//console.log("TRUE elemValue: " + elemValue + " value: " + value);
$(this).prop('checked', true);
//$(this).prop('value', true);
}
else{
//console.log("FALSE elemValue: " + elemValue + " value: " + value);
$(this).prop('checked', false);
//$(this).prop('value', false);
}
});
}
else if($ctrls.length == 1)
{
$ctrl = $ctrls;
if(value) {$ctrl.prop('checked', true);}
else {$ctrl.prop('checked', false);}
}
break;
} //switch input type
}
}) // all json fields
} // populate form
这是一个apendix为@ Nowshath的回答
populateForm(form, data) {
$.each(data, function(key, value) {
if(value !== null && typeof value === 'object') {
this.populateForm(form, value);
}
else {
var ctrl = $('[name='+key+']', form);
switch(ctrl.prop("type")) {
case "radio": case "checkbox":
ctrl.each(function() {
$(this).prop("checked",value);
});
break;
default:
ctrl.val(value);
}
}
}.bind(this));
}
这是什么this.toggleWrappers（关键）;应该是？ –
@LeonardoBeal。我删除了该行：D。这是我的代码库中的一个函数。 – Nicholas
你想创建一个基于现有的控制JSON或设置值的新的表单控件？你的JSON看起来如何？ –
向现有控件注入值。我将编辑以显示我当前的JSON格式 –