是否可以向 nodeMenuButton 添加 onClick 事件？

Question

我试图在单击 nodeMenuButton 时打开 'Details'，因为当我单击该节点时正在打开另一个页面。是否可以通过 "NodeMenu" 中的 onclick 事件来实现？

我尝试了这个 onclick 但没有成功..

Answer 1

BALKABGraph 开发人员在此

这是一个如何使用 onClick 节点菜单项事件的示例

var webcallMeIcon = '<svg width="24" height="24" viewBox="0 0 300 400"><g transform="matrix(1,0,0,1,40,40)"><path fill="#5DB1FF" d="M260.423,0H77.431c-5.522,0-10,4.477-10,10v317.854c0,5.522,4.478,10,10,10h182.992c5.522,0,10-4.478,10-10V10 C270.423,4.477,265.945,0,260.423,0z M178.927,302.594c0,5.522-4.478,10-10,10c-5.523,0-10-4.478-10-10v-3.364h20V302.594z M250.423,279.229H87.431V58.624h162.992V279.229z" /><path fill="#5DB1FF" d="M118.5,229.156c4.042,4.044,9.415,6.271,15.132,6.271c5.715,0,11.089-2.227,15.133-6.269l29.664-29.662 c4.09-4.093,6.162-9.442,6.24-14.816c5.601-0.078,10.857-2.283,14.829-6.253l29.66-29.662c4.042-4.043,6.269-9.417,6.269-15.133 c0-5.716-2.227-11.09-6.269-15.13l-9.806-9.806c-4.041-4.043-9.415-6.27-15.132-6.27c-5.716,0-11.09,2.227-15.132,6.269 l-29.663,29.662c-4.092,4.092-6.164,9.443-6.242,14.817c-5.601,0.078-10.857,2.283-14.828,6.252l-29.661,29.662 c-4.042,4.043-6.269,9.418-6.268,15.136c0,5.716,2.227,11.089,6.269,15.129L118.5,229.156z M168.618,147.548l29.662-29.661 c1.587-1.587,3.696-2.461,5.94-2.461c2.243,0,4.353,0.874,5.938,2.461l9.808,9.808c1.586,1.586,2.46,3.694,2.46,5.937 c0,2.244-0.874,4.354-2.462,5.941l-29.658,29.661c-1.588,1.587-3.697,2.46-5.941,2.46c-2.243,0-4.353-0.874-5.938-2.46 l-0.309-0.309l19.598-19.598c2.539-2.539,2.539-6.654,0-9.192c-2.537-2.538-6.654-2.538-9.191,0l-19.599,19.598l-0.308-0.308 C165.344,156.152,165.345,150.823,168.618,147.548z M117.888,198.28l29.66-29.661c1.587-1.586,3.695-2.46,5.939-2.46 c2.242,0,4.349,0.872,5.934,2.455c0.002,0.001,0.004,0.003,0.005,0.005l0.309,0.309l-19.598,19.598 c-2.539,2.538-2.539,6.653,0,9.191c1.269,1.27,2.933,1.904,4.596,1.904s3.327-0.635,4.596-1.904l19.599-19.598l0.309,0.309 c3.273,3.273,3.273,8.603,0,11.877l-29.662,29.66c-1.588,1.588-3.698,2.462-5.941,2.462c-2.243,0-4.352-0.874-5.938-2.462 l-9.807-9.806c-1.586-1.586-2.46-3.694-2.46-5.938C115.426,201.978,116.3,199.868,117.888,198.28z" /></g></svg>';


        function callHandler(nodeId) {
            var nodeData = chart.get(nodeId);
            var employeeName = nodeData["name"];
            window.location = 'https://webcall.me/' + employeeName;
        }


        var chart = new OrgChart(document.getElementById("tree"), {
            template: "olivia",
            nodeBinding: {
                field_0: "name",
                field_1: "title",
                img_0: "img"
            },
            nodeMenu: {
                call: {
                    text: "Call now",
                    icon: webcallMeIcon,
                    onClick: callHandler
                }
            },
            nodes: [
                { id: 1, name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
                { id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },

                { id: 3, pid: 1, tags: ["HRs"], name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
                { id: 4, pid: 1, tags: ["HRs", "Node with unique template"], name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" }
            ]
        });

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  overflow: hidden;
  font-family: Helvetica;
}
#tree{
  width:100%;
  height:100%;
}

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"/>

编辑

您可以创建自己的节点菜单

下面的代码片段演示了如何在 nodeMenuButton 单击时打开编辑视图

myNodeMenu = function () {
};

myNodeMenu.prototype.init = function (obj) {
    this.obj = obj;
};

myNodeMenu.prototype.show = function (x, y, id) { 
  this.obj.editUI.show(id);
}

myNodeMenu.prototype.hide = function () {
}
    
    
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "derek",
        enableDragDrop: true,
        nodeMenuUI: new myNodeMenu(),
        menu: {
            pdf: { text: "Export PDF" },
            png: { text: "Export PNG" },
            svg: { text: "Export SVG" },
            csv: { text: "Export CSV" }
        },
        nodeMenu: {
            details: { text: "Details" },
            add: { text: "Add New" },
            edit: { text: "Edit" },
            remove: { text: "Remove" },
        },
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            img_0: "img",
            field_number_children: "field_number_children"
        },
        nodes: [
            { id: 1, name: "Denny Curtis", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
            { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://balkangraph.com/js/img/3.jpg" },
            { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://balkangraph.com/js/img/4.jpg" },
            { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://balkangraph.com/js/img/5.jpg" },
            { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://balkangraph.com/js/img/6.jpg" },
            { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://balkangraph.com/js/img/7.jpg" },
            { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://balkangraph.com/js/img/8.jpg" }
        ]
    });

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#tree {
    width: 100%;
    height: 100%;
}


/*partial*/
#tree {
    font-family: 'Gochi Hand', cursive;
}

<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>

如果这是你想要的，请告诉我

Answer 2

对不起，我可能说了一些与我想说的不一样的话。我想做的是：当我点击“3 点”时，详细信息页面打开，或者 'editUI'，如您所说。

像这样：

nodeMenu: {
    onClick: callHandler
},

或者在我创建 nodeMenuButton 时放置一个 onclick 事件：

OrgChart.templates.joao.nodeMenuButton = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,93,15)" onclick="callHandler();">(...)</g>';

callHandler 是一个打开 editForm 的函数。

是否可以向 nodeMenuButton 添加 onClick 事件？

Is it possible to add a onClick event to the nodeMenuButton?

orgchart