mxgraph 选择框类型节点的添加

使用场景

如图所示，转换器和过滤器类型的组件需要支持下拉框，为此实现了两个版本的组件选择功能，第一个版本是点击下拉框中的元素，在转换器的位置对组件进行更换，有点反人类，换成了现在的版本，下拉框中的内容能够直接拖拽。

实现过程

实现的思路还是新建不同的元素，插入到下拉框中。

主要html：

<ul class="list-inline control-container" id="upContainer" style="text-align:center;height: 60px; width: 100%"><li> <div class="dropdown"> <a class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> <img src="<l:asset path='../dmas/dataway/img/design/converter.png'/>" /> 转换器	<span class="caret"></span> </a> <ul class="dropdown-menu dropdown-menu-right ue-dropdown-menu" id = "zhqul"></li> </ul> </div> </li>

主要js代码:

 function addSelectSidebar(graph, sidebar, image, name, doc, none, htmlSelect, className, type) {
        var funct = function (graph, evt, cell, x, y) {
            var parent = graph.getDefaultParent();
            var model = graph.getModel();
            var v1 = null;
            var node = doc.createElement(type);
            /*node.setAttribute("name",name);*/
            node.setAttribute("label", name);
            node.setAttribute("dbtype",'');
            /*node.setAttribute("dataid","dataid");//指向数据库*/
            var style = '';
            if (name == '源库') {
                style = 'state;';
            } else if (name === "SQL") {
                style = 'end;';
            }
            model.beginUpdate();
            try {
                v1 = graph.insertVertex(parent, null, node, x, y, 40, 40, style + 'shape=image;image=' + image + ';verticalLabelPosition=bottom;verticalAlign=top');
                v1.setConnectable(true);
            } finally {
                model.endUpdate();
            }
            graph.setSelectionCell(v1);
        }
        var div = document.createElement('li');
        //div.style.height = '60px';
        //div.style.width = '110px';
        //div.style.paddingRight = '20px';
        if (none != 'false') {
            div.style.display = 'none';
        }else{
            div.style.display = 'block';
        }
        div.id = name;
        div.className = "dropdown";
        div.name = className;
        var text = document.createElement('a');
        text.style.display = 'inline';
        text.innerHTML = ' ' + name + ' ';
        var img = document.createElement('img');
        img.setAttribute('src', image);
        /*img.style.display='inline';*/
        img.style.width = '30px';
        img.style.height = '30px';
        div.appendChild(img);
        div.appendChild(text);
        sidebar.appendChild(div);
        var dragElt = document.createElement('img');
        dragElt.setAttribute('src',image);
        dragElt.style.width = '40px';
        dragElt.style.height = '40px';
        var ds = mxUtils.makeDraggable(div, graph, funct, dragElt, 0, 0, true, true);
        ds.setGuidesEnabled(true);
    };

标签：mxgraph,name,img,graph,style,添加,var,div,节点
来源： https://blog.csdn.net/L_nangua/article/details/100865400