Question

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

我尝试更改className，同时使用dhtmlx创建表单，但它只是更改容器的className。我也需要更改它的className以及父元素，所以Bootstrap可以理解它。

我想直接添加HTML元素，如果可以实现窗口的话。它比修改dhtmlx生成的字段简单得多。

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

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

非常感谢。

Answer 1

最后，我直接插入了HTML元素。通过这种方式，我可以创建我想要的表单，就像我想要的那样。

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

获取dhtmlx窗口内的表单的引导布局

1 个答案: