在dhtmlx窗口中获取表单的引导程序布局

Question

我有一个包含表单的dhtmlx窗口。 我想获得一个带有引导类的响应表单。 我现在的问题是，我似乎无法在窗口中添加自己的表单，并且无法更改字段的className（例如输入字段）。

我尝试在使用dhtmlx创建表单时更改className，但它只是更改了容器的className。 我还需要更改其元素的className以及父元素，因此Bootstrap可以理解它。

实际上，我想直接向窗口添加HTML元素。 这比修改dhtmlx生成的字段要简单得多。

我做了一个小的JSFiddle来展示我的问题： http : //jsfiddle.net/davidgourde/tnqfp6y8/1/

 var myForm, formData; var dhxWins, w1; function doOnLoad() { formData = [ {type: "settings", position: "label-left", labelWidth: 100, inputWidth: 120}, {type: "block", inputWidth: "auto", offsetTop: 12, list: [ {type: "input", label: "Login", value: "p_rossi", className: "form-control"}, {type: "password", label: "Password", value: "123"}, {type: "checkbox", label: "Remember me", checked: true}, {type: "button", value: "Proceed", offsetLeft: 70, offsetTop: 14} ]} ]; dhxWins = new dhtmlXWindows(); dhxWins.attachViewportTo("vp"); w1 = dhxWins.createWindow("w1", 10, 10, 300, 250); w1.denyResize(); myForm = w1.attachForm(formData, true); } doOnLoad(); 

 div#vp { height: 600px; border: 1px solid #dfdfdf; } 

 <link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script> <script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script> <div id="vp"></div> 

非常感谢你。

Answer 1

最后，我直接插入了HTML元素。 这样，我可以完全按照自己的需要创建所需的表单。

 var myForm, formData; var dhxWins, w1; function doOnLoad() { dhxWins = new dhtmlXWindows(); dhxWins.attachViewportTo("vp"); w1 = dhxWins.createWindow("w1", 10, 10, 300, 250); myForm = w1.attachHTMLString( '<div class="container">' + '<div class="form-group col-xs-12 col-sm-6">' + '<label>label</label>' + '<div>' + '<input class="form-control" type="text">' + '</div>' + '</div>' + '</div>' ); } doOnLoad(); 

 div#vp { height: 600px; border: 1px solid #dfdfdf; } 

 <link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script> <script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script> <div id="vp"></div>