权限(添加/删除，但不能编辑)

Question

我知道为了允许编辑整个小部件，您使用属性enableEdit=true(或false来禁用(，但是我如何禁用节点的"编辑"但只允许添加/删除？

谢谢乔治

Answer 1

一种解决方法，虽然我相信不是最好的方法，但它会解决问题，直到它作为 API 的一个选项。

<style>
      /* use a CSS selector */
      [data-btn-action="edit"] { display:none !important; }
</style>

同样适用于"添加"和"del"。希望这也对其他人有所帮助。

乔治

Answer 2

您可以在方块中显示自己的按钮，并添加侦听器，如下所示：

对于显示自定义按钮：

    var btnAdd = '<g data-action="add" id="btnInsertNode" class="btn" transform="matrix(0.14,0,0,0.14,0,0)"><rect style="opacity:0" x="0" y="0" height="300" width="300" /><path  fill="#686868" d="M149.996,0C67.157,0,0.001,67.158,0.001,149.997c0,82.837,67.156,150,149.995,150s150-67.163,150-150 C299.996,67.156,232.835,0,149.996,0z M149.996,59.147c25.031,0,45.326,20.292,45.326,45.325 c0,25.036-20.292,45.328-45.326,45.328s-45.325-20.292-45.325-45.328C104.671,79.439,124.965,59.147,149.996,59.147z M168.692,212.557h-0.001v16.41v2.028h-18.264h-0.864H83.86c0-44.674,24.302-60.571,40.245-74.843 c7.724,4.15,16.532,6.531,25.892,6.601c9.358-0.07,18.168-2.451,25.887-6.601c7.143,6.393,15.953,13.121,23.511,22.606h-7.275 v10.374v13.051h-13.054h-10.374V212.557z M218.902,228.967v23.425h-16.41v-23.425h-23.428v-16.41h23.428v-23.425H218.9v23.425 h23.423v16.41H218.902z"/></g>';
    var btnEdit = '<g data-action="edit" id="btnUpdateNode" class="btn" transform="matrix(0.14,0,0,0.14,50,0)"><rect style="opacity:0" x="0" y="0" height="300" width="300" /><path fill="#686868" d="M149.996,0C67.157,0,0.001,67.161,0.001,149.997S67.157,300,149.996,300s150.003-67.163,150.003-150.003 S232.835,0,149.996,0z M221.302,107.945l-14.247,14.247l-29.001-28.999l-11.002,11.002l29.001,29.001l-71.132,71.126 l-28.999-28.996L84.92,186.328l28.999,28.999l-7.088,7.088l-0.135-0.135c-0.786,1.294-2.064,2.238-3.582,2.575l-27.043,6.03 c-0.405,0.091-0.817,0.135-1.224,0.135c-1.476,0-2.91-0.581-3.973-1.647c-1.364-1.359-1.932-3.322-1.512-5.203l6.027-27.035 c0.34-1.517,1.286-2.798,2.578-3.582l-0.137-0.137L192.3,78.941c1.678-1.675,4.404-1.675,6.082,0.005l22.922,22.917 C222.982,103.541,222.982,106.267,221.302,107.945z"/></g>';
    var btnDel = '<g data-action="delete" id="btnRemoveNode" class="btn" transform="matrix(0.14,0,0,0.14,100,0)"><rect style="opacity:0" x="0" y="0" height="300" width="300" /><path fill="#686868" d="M112.782,205.804c10.644,7.166,23.449,11.355,37.218,11.355c36.837,0,66.808-29.971,66.808-66.808 c0-13.769-4.189-26.574-11.355-37.218L112.782,205.804z"/> <path stroke="#686868" fill="#686868" d="M150,83.542c-36.839,0-66.808,29.969-66.808,66.808c0,15.595,5.384,29.946,14.374,41.326l93.758-93.758 C179.946,88.926,165.595,83.542,150,83.542z"/><path stroke="#686868" fill="#686868" d="M149.997,0C67.158,0,0.003,67.161,0.003,149.997S67.158,300,149.997,300s150-67.163,150-150.003S232.837,0,149.997,0z M150,237.907c-48.28,0-87.557-39.28-87.557-87.557c0-48.28,39.277-87.557,87.557-87.557c48.277,0,87.557,39.277,87.557,87.557 C237.557,198.627,198.277,237.907,150,237.907z"/></g>';
    getOrgChart.themes.monica.box += '<g transform="matrix(1,0,0,1,350,10)">'
            + btnAdd
            + btnEdit
            + btnDel
            + '</g>';

对于听众：

    document.getElementById("btnInsertNode").addEventListener("click", function () {
        orgchart.insertNode(2, { Name: "New Node" }/*, id optional*/);
    });
    document.getElementById("btnUpdateNode").addEventListener("click", function () {
        orgchart.updateNode(7, 1, { Name: "7 New the parent node is 1" });
    });
    document.getElementById("btnRemoveNode").addEventListener("click", function () {
        orgchart.removeNode(6);
    });

这应该可以帮助您：http://www.getorgchart.com/QuickStart/Methods/editNodeMethods.html