Question

我正在开发一个应用程序，允许人们选择他们想要一个表单的数据字段。我有它的工作，但当我试图将表单字段移动到一个表格的视觉结构时，我遇到了一个问题。

  // Now print the form to a new div
  array.forEach(selectedFields, function(item, i) {
      var l = domConstruct.create("label", {
                                    innerHTML: item + ': ',
                                    class: "dataFieldLabel",
                                    for: item
                                });
                                var r = new TextBox({
                                    class: "dataField",
                                    name: item,
                                    label: item,
                                    title: item
                                });
                                var a = domConstruct.toDom("<tr><td>" + l + r + "</td></tr>");
                                domConstruct.place(a, "displayDataForm");

当我运行代码时，我可以选择我想要的字段，而不是在屏幕文本上绘制文本框，如：

[object HTMLLabelElement] [Widget dijit.form.TextBox，dijit_form_TextBox_0] [object HTMLLabelElement] [Widget dijit.form.TextBox，dijit_form_TextBox_1]

而是打印到屏幕上。我想这是因为我传递了domConstruct.place文本和对象的混合。关于如何解决这个问题的任何想法？谢谢！

Answer 1

试试这个：

require(["dojo/_base/array", "dojo/dom-construct", "dijit/form/TextBox", "dojo/domReady!"], function(array, domConstruct, TextBox){
    var selectedFields = ["Foo", "Bar", "Baz"];
    array.forEach(selectedFields, function(item, i) {
        var tr = domConstruct.create("tr", {}, "displayDataForm"),
            td = domConstruct.create("td", {}, tr),
             l = domConstruct.create("label", {
                 innerHTML: item + ': ',
                 'class': 'dataFieldLabel',
                 'for': item
             }, td, 'first'),
             r = new TextBox({
                 'class': 'dataField',
                 name: item,
                 title: item
             }).placeAt(td, 'last');
    });
});

这假设你在html中有这个：

<table id="displayDataForm"></table>

不要忘记引用“class”和“for”，因为这些是javascript语法的一部分。

Answer 2

domConstruct函数不适用于小部件。您可以创建html，然后查询输入节点并创建测试框。

var root = dom.byId("displayDataForm");
domConstruct.place(root, 
    lang.replace(
      '<tr><td><label class="dataFieldLabel" for="{0}>{0}:</label><input class="inputNode"></input></td></tr>', 
      [item])
);

query('.inputNode', root).forEach(function(node){
    var r = new TextBox({
        'class': "dataField",
        name: item,
        label: item,
        title: item
    });
});

Answer 3

Craig感谢你的帮助，你说得对，只是在调用domConstruct.place时，第一个参数是要追加的节点，第二个参数是要追加的refNode。谢谢。

// Now print the form to a new div
array.forEach(selectedFields, function(item, i) {
    var root = dom.byId("displayDataForm");
    domConstruct.place(lang.replace(
          '<tr><td><label class="dataFieldLabel" for="{0}">{0}: </label><input class="dataField"></input></td></tr>', 
          [item]), root
    );

    query('.dataField', root).forEach(function(node) {
        var r = new TextBox({
            'class': "dataField",
            name: item,
            label: item,
            title: item
        });
    });
});

Dojo domConstruct - 将行插入表中

3 个答案: