我需要动态创建表单。可以编辑这些表单,之后应该保留新的表单模板(json 格式)。这是我用来创建动态表单的代码:
dhtmlx.image_path='./codebase/imgs/';
var main_layout = new dhtmlXLayoutObject(document.body, '1C');
var a = main_layout.cells('a');
var str = [
{ type:"button" , name:"form_button_1", value:"Add" },
{ type:"fieldset" , name:"form_fieldset_1", label:"Fieldset", list:[
{ type:"input" , name:"form_input_1", label:"Input", labelWidth:100 },
{ type:"input" , name:"form_input_2", label:"Input", labelWidth:100 }
] },
{ type:"fieldset" , name:"form_fieldset_2", label:"Fieldset2", list:[
{ type:"input" , name:"form_input_3", label:"Input", labelWidth:100 },
{ type:"input" , name:"form_input_4", label:"Input", labelWidth:100 }
] },
{ type:"fieldset" , name:"form_fieldset_3", label:"Fieldset3", list:[
{ type:"input" , name:"form_input_5", label:"Input", labelWidth:100 },
{ type:"input" , name:"form_input_6", label:"Input", labelWidth:100 }
] },
{ type:"button" , name:"form_button_2", value:"Remove" },
{ type:"button" , name:"form_button_3", value:"Save" },
{ type:"button" , name:"form_button_4", value:"Save JQ" }
];
var form_1 = a.attachForm(str);
var toolbar_1 = a.attachToolbar();
toolbar_1.setIconsPath('./codebase/imgs/');
toolbar_1.loadXML('./data/toolbar.xml', function(){});
var k = 4;
form_1.attachEvent('onButtonClick', function(name, command){
if (name == "form_button_1") {
var itemData = { type:"fieldset" , name:"form_fieldset_" + k, label:"Fieldset" + k, list:[
{ type:"input" , name:"form_input_" + k + "_1", label:"Input", labelWidth:100 },
{ type:"input" , name:"form_input_" + k + "_2", label:"Input", labelWidth:100 }
] };
form_1.addItem("form_1", itemData, k++);
}
else if (name == "form_button_2") {
k--;
form_1.removeItem("form_fieldset_" + k);
}
else if (name == "form_button_3") {
var itemsList = form_1.getItemsList();
var i=0;
for (i=0;i<itemsList.length;i++) {
var theItem = "" + itemsList[i];
var itemValue = form_1.getItemValue(theItem);
alert(form_1.getItemType(theItem + ": " ));
}
}
else if (name == "form_button_4") {
// HERE I NEED THE STRING THAT CAN BE USED TO CREATE THIS FORM LATER
}
});
当我按下 form_button_4
时,我应该得到一个像上面的 str
这样的 json 数组,这样我就可以使用这个数组来创建相同的表单。我怎样才能做到这一点? functions 我几乎都试过了在这里,但我无法获得任何正确的字符串。
您知道实现此目标的其他更简单的方法吗?可能是与 dhtmlx 不同的库?
提前致谢
最佳答案
我查看了文档,虽然看起来 DHTMLX 没有提供在创建表单后恢复表单配置的能力,但您可以做一些事情来获得您想要的。通常,您必须对他们的代码进行逆向工程(很痛苦),这意味着对他们代码的任何版本更改都会导致您的代码崩溃。
不过,这里有一个更简单的方法。您所要做的就是跟踪您的更改。方法如下。
开始时,您有一个变量 str
,它将表单的配置保存在一个数组中。
var str = [
{ type:"button" , name:"form_button_1", value:"Add" },
{ type:"fieldset" , name:"form_fieldset_1", label:"Fieldset", list:[
{ type:"input" , name:"form_input_1", label:"Input", labelWidth:100 },
{ type:"input" , name:"form_input_2", label:"Input", labelWidth:100 }
] },
{ type:"fieldset" , name:"form_fieldset_2", label:"Fieldset2", list:[
{ type:"input" , name:"form_input_3", label:"Input", labelWidth:100 },
{ type:"input" , name:"form_input_4", label:"Input", labelWidth:100 }
] },
{ type:"fieldset" , name:"form_fieldset_3", label:"Fieldset3", list:[
{ type:"input" , name:"form_input_5", label:"Input", labelWidth:100 },
{ type:"input" , name:"form_input_6", label:"Input", labelWidth:100 }
] },
{ type:"button" , name:"form_button_2", value:"Remove" },
{ type:"button" , name:"form_button_3", value:"Save" },
{ type:"button" , name:"form_button_4", value:"Save JQ" }
];
添加字段集时,也将新字段集的配置添加到现有配置中。
str.splice(k, 0, itemData);
k++;
当您删除一个字段集时,也会从现有配置中删除旧字段集的配置。
k--;
str.splice(k, 1);
然后,当您想将配置作为字符串输出时:
var string = JSON.stringify(str);
我玩得很开心,并在 http://jsfiddle.net/bbankes/jvPbm/ 上用原始 javascript 模拟了一个工作示例
关于javascript - 保存动态创建的表单架构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22199015/