![](/img/trans.png)
[英]Javascript form inputs created dynamically from json and need to map object to proper field from another object and save
[英]Form created dynamically from Javascript Object loop. How to save data back to object
我有以下代碼,將一個字符串a修改為一個對象。 然后,我創建一個項目列表,當用戶單擊其中一個列表項目時,它將創建一個表單,該表單具有分配給該鍵的對象中的值。
由於表單是動態創建的,所以我遇到的問題是編輯表單數據並將其保存回對象。
演示: http : //jsfiddle.net/kHysL/1/
代碼(不要注意$(document).ready()上面的代碼。它是字符串解析器):
var str = 'View\n{\n Name: View1;\n Image\n {\n BackgroundImage: Image.gif;\n Position: 0, 0;\n Width: 320;\n Height: 480;\n }\n\n Button\n {\n BackgroundImage: Button.gif;\n Transition: View2;\n Position: 49, 80;\n Width: 216;\n Height: 71;\n }\n\n Button\n {\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n Height: 134;\n }\n\n Label\n {\n Position: 106, 91;\n Width: 96;\n Height: 34;\n Text: "Button";\n FontSize: 32;\n Color: 0.12549, 0.298039, 0.364706, 1;\n }\n Scroll\n {\n Position: 106, 91;\n Width: 96;\n Height: 34;\n Button{\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n Height: 134;\n }\n Button{\n BackgroundImage: Button2.gif;\n Position: 65, 217;\n Width: 188;\n \n Height: 134;\n }\n\n }\n\n}';
str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
str = str.replace(/;/g, ","); // swap out semicolons with commas
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
str = str.replace(/"/g, ""); // get rid of all double quotes
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings
$("#parseList").html(str);
var objStr;
eval("objStr={" + str + "};");
//End Parse String
$(document).ready(function () {
var selected;
//Build Initial Object LIst
var initObjectList = '<div id="main">';
$.each(objStr.View, function (k, v) {
initObjectList += '<div>' + k + '</div>';
});
initObjectList += '</div>';
$('#main').append(initObjectList)
$(document).on('click', '#main div div', function () {
var index = $('#main div div').index(this);
$(this).click(function () {
$('#form div').remove();
codeSnippet = "";
x = $('#main div div').toArray();
codeSnippet = (x[index].innerHTML);
console.log(codeSnippet);
var initObjectDetail = '<div id="form">';
$.each(objStr.View[codeSnippet], function (k, v) {
initObjectDetail += '<div>' + k + '</div>' + '<input value=' + v + '>' + '</input>';
console.log(v);
});
initObjectList += '</div>';
$('#form').append(initObjectDetail)
});
});
});
輸入如何將其保存回對象將不勝感激
通過在形成列表的原始循環內指定單擊處理程序,可以大大簡化制作可單擊對象的列表。
表單生成和保存功能由於數據的怪異而變得復雜,即objStr.View
屬性之一是字符串,而其他屬性是對象。 您將在下面看到我們必須在兩個地方分支以解決這種差異。
$(document).ready(function () {
var $objectList = $('<div id="main" />').appendTo($('#main'));
$.each(objStr.View, function(k, v) {
$('<div/>').append(k).appendTo($objectList).on('click', function(){
var $wrapper = $('#form .wrapper').empty();
if(typeof v === 'string') {
$('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
}
else {//object
$('<h3 class="formHeading" />').append(k).appendTo($wrapper);
$.each(v, function(key, val) {
$('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
});
}
$("<button>Save</button>").appendTo($wrapper).on('click', function() {
if(typeof v === 'string') {
v = $(this).closest(".wrapper").find("input").val();
}
else {//object
$(this).closest(".wrapper").find(".item").each(function(i, div) {
var $div = $(div),
key = $div.find(".key").text(),
val = $div.find("input").val();
v[key] = val;
});
}
});
});
});
});
您還將看到此代碼不需要在HTML中硬編碼的“保存”按鈕。 每次填充表單時都會生成一個新的“保存”按鈕。 不一定要這樣,但這就是我采用的方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.