javascript - 保存动态创建的表单架构

Question

我需要动态创建表单。可以编辑这些表单，之后应该保留新的表单模板(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 不同的库？

提前致谢

Answer 1

我查看了文档，虽然看起来 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 模拟了一个工作示例