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中嘲笑了一个工作示例

Answer 2

对于一些简单的表单，我使用clone（）和$（＆＃39;＆＃39;）动态创建元素并将它们插入到表单中。提交时，我使用$（＆＃39;＆＃39;）。html（）然后mime编码并保存。

这是一种非常粗暴的做事方式，但对当时的任务运作良好。

演示：http://jsfiddle.net/LPYuu/1/

<form>
  <input class="textbox-clone">  
  <input type="submit" value="submit">
</form>


<div onclick="$('#form-code').val(  escape( $('form').first().html() )  )">1. get form code</div>         


<div onclick="$('form').first().html('')">2. clear form</div>           

<div onclick="$('form').first().html(  unescape( $('#form-code').val() )   )">3. retrive form from textbox code</div>           


<textarea id="form-code">    
</textarea>

保存动态创建的表单模式

2 个答案: