Dojo dijit 动态添加 Div 按钮

Question

我在尝试动态创建图层时遇到问题，这些图层可以使用 div 作为在创建图层时添加的按钮来构建和删除。代码如下：

//build point graphics layer
graphicsLayerInfo = this._addNewExcelLayerToList(plotArray.length);
graphicsLyr = new GraphicsLayer( { id:graphicsLayerInfo.graphicsLayerID} );
this.map.add(graphicsLyr);
on(dojo.byId(graphicsLayerInfo.removeButtonID), "click" , lang.hitch(this, this._removeExcelLayer, {layerID: graphicsLayerInfo.graphicsLayerID, buttonLayerID: graphicsLayerInfo.currentLayerInfo}) );
...

以及用于构建 DIV/button

的函数

_addNewExcelLayerToList: function (pointCount) {
    if (this.debugMOde) {
        console.info( this.name + ' - ADD NEW EXCEL LAYER called.' );
    }

    this.layerCount++;
    currentLayerID = 'graphicsLayer' + this.layerCount;
    graphicsLayerID = this.name + '_gLyr' + this.layerCount;
    removeButtonID = "removeGraphicsLayer" + this.layerCount;
    this.layerList.push(currentLayerID);
    var layerInfo = "Number of Features: 1 Line";
    if (pointCount) {
        layerInfo = "Number of Features: " + pointCount;
    }

    content = "<div id ='" + currentLayerID + "'" +
                    "style='width: 95%;" +
                           "height: 16px;" +
                           "line-height: 16px" +
                           "verticle-align: middle;" +
                           "padding: 5px;" +
                           "background-color: #000000;'" +
              ">" +
                  "<div style='float:left;'>" +
                      "<div style="float: left;" +
                                  "width: 20px;" +
                                  "line-height: 20px;" +
                      ">" +
                          "<img src='./js/Upload/images/excel.png'" +
                               "style='position: absolute;" +
                                      "top: 0;" +
                                      "bottom: 0;" +
                                      "margin-top: -10px;" +
                                      "width: 20px;" +
                                      "vertical-align: middle;'" +
                          "></img>" +
                      "</div>
                      "<div style='float:left;" +
                                  "font-size: 0.9em;" +
                                  "color: #ffffff;'" +
                      ">" +
                          "Layer" + this.layerCount + ": " + layerInfo +
                      "</div>" +
                  "</div>" +
                  "<div id='" + removeButtonID + "'" +
                            "data-dojo-attach-point='" + removeButtonID + "'" +
                            "name='" + removeButtonID + "'" +
                            "id='" + removeBUttonID + "'" +
                            "style='float: right;" +
                                   "width: 13px;" +
                                   "height: 13px;" +
                                   "cursor: pointer;" +
                                   "border-radius: 50%;" +
                                   "border: 2px; solid #ffffff;" +
                                   "background-color: #ff0000;" +
                                   "color: #ffffff;" +
                                   "font-weight: 300;" +
                                   "font-size: 17px;" +
                                   "font-family: Arial, sans-serif;" +
                                   "text-align: center;'" +
                  ">" +
                      "X" +
                  "</div>" +
              "</div>";

    layerListDiv.innerHTML += content;

    graphicsLayerInfo = {
        removeButtonID: removeButtonID,
        graphicsLayerID: graphicsLayerID,
        currentLayerID: currentLayerID
    }

    return graphicsLayerInfo
 }

和删除 DIV

的函数

_removeExcelLayer: function(layerInfo) {
    if (this.debugMode) {
        console.info( this.name + " - REMOVE EXCEL LAYER called.");
    }

    this.map.removeLayer( this.map.getLayer(layerInfo.layerID) );
    dojo.destroy(layerInfo.buttonLayerID);
}

如果我只创建一个图层，它会删除图层。如果我创建多个，则只会移动最后创建的图层。所有其他的“removeButton”都不起作用。

关于如何让这个移除图层的任何想法 dividually，每个按钮？

Answer 1

好吧，在一位同事的帮助下，我让它工作了，但不是完全独立的事件处理程序。我使用 domConstruct 来创建它自己的影响区域：

domConstruct.create("div", { innerHTML: content }, layerListDiv);

而不是顺子：

layerListDiv.innerHTML += content;

感谢您的尝试 ManjunathaMuniyappa。

Dojo dijit 动态添加 Div 按钮

Dojo dijit add Div buttons dynamically

html

dojo

dynamic

button