我想知道如何使用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格式 –