javascript - 使用 jQuery (1.8) 动态添加带有 dojo 组合框(版本 1.8.1)的行作为行的元素之一

Question

我正在尝试使用 jQuery 动态插入行。除了组合框未出现在行中外，它与以下代码一起工作正常。我已经解析了组合框，但它仍然没有出现并在行中向我显示“Design Abbr [Widget dijit.form.ComboBox, solutionAbbr1]”。其实我在这里期待一个组合框。谁能帮我解决这个问题。我为 jquery 和 dojo 使用 1.8 版本。

 var maxcount = 0;
 require(["dojo/parser", "dojo/dom", "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"],
 function(parser, dom, Memory, ComboBox){
        this.addBlock =  function() {
        maxcount += 1;
        var stateStore = new Memory({data: [{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},{name:"Connecticut", id:"CT"}]});
        var comboBoxId = "solutionAbbr"+maxcount;
        var comboBox = new ComboBox({id: comboBoxId, name: "solutionAbbr",
value: "California",store: stateStore,searchAttr: "name"}, "stateSelect");
        //parser.parse.then(function(comboBox) {document.getElementById("solutionAbbr"+maxcount)});
        parser.parse(dijit.byId(comboBoxId));
        //alert(dijit.byId(comboBoxId).get('value'));


    $('<tr id="idForNewRow'+maxcount+'">'
        +'<td colspan="4">'
            +'<table id="idForBorder">'
                +'<tr class="even">'
                    +'<th align="left"><font color="red">Design Abbr</font></th>'
                    +'<td align="left" valign="bottom" colspan="3">'
                    +comboBox+'</td>'
                +'</tr>'
        +'</table></td></tr><tr><td colspan="4"><a href="javascript:removeRow('
            +maxcount+')">Remove</a>').insertAfter("[id*=idForNewRow]:last");
    }
});

Answer 1

在您的插入中，您必须使用 comboBox.domNode::

 $('<tr id="idForNewRow'+maxcount+'">'
    +'<td colspan="4">'
        +'<table id="idForBorder">'
            +'<tr class="even">'
                +'<th align="left"><font color="red">Design Abbr</font></th>'
                +'<td align="left" valign="bottom" colspan="3">'
                +comboBox.domNode+'</td>'
            +'</tr>'
    +'</table></td></tr><tr><td colspan="4"><a href="javascript:removeRow('
        +maxcount+')">Remove</a>').insertAfter("[id*=idForNewRow]:last");

此外，如果您手动将其放置在页面上，您不妨从新的 ComboBox 构造函数中取出“stateSelect”。当您希望小部件将其自身放置在页面上时，这就是您放置 domid 的位置。

此外，不要使用 parser.parse 命令，您应该在将应用程序插入页面后调用应用程序启动::comboBox.startup()

编辑(以上将不起作用，因为 comboBox.domNode 创建了一个节点对象)::为了使它更简单，我只是颠倒顺序。首先添加您的 html，然后创建小部件，然后小部件将能够将自身添加到页面

    $('<tr id="idForNewRow' + maxcount + '">' + '<td colspan="4">' + 
      '<table id="idForBorder">' + 
      '<tr class="even">' + 
      '<th align="left"><font color="red">Design Abbr</font></th>' + 
      '<td align="left" valign="bottom" colspan="3" id="select' + maxcount + '"></td>'+
      '</tr>'+
    '</table></td></tr><tr><td colspan="4">'+
      '<a href="javascript: removeRow('+maxcount+')">Remove</a>').insertAfter("[id*=idForNewRow]:last");

    var stateStore = new Memory({data: [{name:"Alabama", id:"AL"},
    {name:"Alaska", id:"AK"},
    {name:"Armed Forces the Americas", id:"AA"},
    {name:"California", id:"CA"},
    {name:"Connecticut ", id:"CT"}]});

    var comboBoxId = "solutionAbbr"+maxcount;
    var comboBox = new ComboBox({id: comboBoxId, name: "solutionAbbr",
    value: "California",store: stateStore,searchAttr: "name"}, "select"+maxcount);
    comboBox.startup();

如 http://jsfiddle.net/uLCS6/3/ 所示