javascript - JQuery/HTML5 : Organisational Chart, 如何使用此插件正确删除节点？

Question

我想做一个组织结构图，但我有一些问题......我使用 JorgChart 插件 ( http://www.webresourcesdepot.com/jorgchart-a-plugin-for-creating-interactive-organization-charts-with-jquery/ )

事情是这样的:

• 我设法执行双击事件以更改节点名称并正确插入此插件。

• 我设法做了一个个性化的上下文菜单来添加/删除一个节点。

• 当我删除一个节点(而不是叶子)时没有问题，节点变成灰色并且失去了他的名字；但是当我想删除一片叶子时，“节点”消失了，但“黑线”仍然存在......

而且我不知道我怎样才能让这些行同时消失......

这是删除函数的样子:

    /* line 346 */ 
    function removeNode() {


        /* The node is desactivated, we put it in grey. */
        lastClicked.addClass("nodeDeleted");

        var $tr = lastClicked.closest('tr');

        if(!lastClicked.hasClass("expanded")) {

            $tr.html(" ");

            /* We do the difference between the fact that the node disappared*/
            console.log("We removed for real the node: "+lastClicked.html().trim().substring(0,14));

        } else {

            /* And the fact that we just put the none in grey. */
            console.log("We desactived the node: "+lastClicked.html().trim().substring(0,14));
        }

        /* We erase the name of the node. */
        lastClicked.html("");
    }

已在 IE11、Chrome 和 Firefox 上测试，但在 Safari 上可能存在一些问题。

JSFiddle:http://jsfiddle.net/ndt02yjc/1/

现在的结果:http://jsfiddle.net/ndt02yjc/embedded/result/

非常感谢您，干杯!

Answer 1

瓦伦丁，

我首先查看了您使用的插件生成的结构，例如 boss3:

<td colspan="2" class="node-container">
    <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr class="node-cells">
                <td colspan="4" class="node-cell">
                    <div style="cursor: pointer;" class="node expanded">Boss 3</div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div class="line down"></div>
                </td>
            </tr>
            <tr>
                <td class="line left"></td>
                <td class="line right top"></td>
                <td class="line left top"></td>
                <td class="line right"></td>
            </tr>
            <tr>
                <td colspan="2" class="node-container">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr class="node-cells">
                                <td colspan="2" class="node-cell">
                                    <div style="cursor: pointer;" class="node expanded">Richard</div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="line down"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="line left"></td>
                                <td class="line right"></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="node-container">
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <tbody>
                                            <tr class="node-cells">
                                                <td colspan="2" class="node-cell">
                                                    <div class="node">Bizut</div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            <td colspan="2" class="node-container">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                            <tr class="node-cells">
                                <td colspan="2" class="node-cell">
                                    <div class="node">Nicolas</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</td>

所以我只是查看了 removeNode 函数来处理不同的情况:

• 如果所选项目有 sibling (同一级别的其他人)，我们只需删除 2 行:一行 right top 和 left top ( see the table row with that kind of lines to understand) from the table row before the row of the selected item

• 如果所选项目没有兄弟项，那么您可以删除包含这些线的表格行，但仍会保留一个表格行(形状之间的线由 2 行组成，以便处理水平方向部分行)，在此行之前，这就是我使用 containerUpperLineRow

的原因

见下面的函数:

function removeNode() {
    var parentContainer = lastClicked.closest('.node-container');
    var containerLowerLinesRow = parentContainer.parent().prev('tr');
    var containerUpperLineRow = containerLowerLinesRow.prev('tr');
    /* If item is a leaf, remove it and the lines */
    if (!lastClicked.hasClass("expanded")) {
        // Handle the lines going to the deleted item
        if (parentContainer.siblings().length > 0) {                
            // More than one remaining node at the same level: drop a "right top" and a "left top" line
            containerLowerLinesRow.children('.line.left.top:first').remove();
            containerLowerLinesRow.children('.line.right.top:first').remove();
            // Remove the selected item (from the node container)
            parentContainer.remove();
        } else {
            containerUpperLineRow.prev('tr').find('.expanded').removeClass('expanded');
            containerLowerLinesRow.remove();
            containerUpperLineRow.remove();
            // Remove the selected item (from the node container)
            parentContainer.remove();
            console.log("The node that we want to delete has no siblings");
        }
        console.log("We removed for real the node: " + lastClicked.html().trim().substring(0, 14));
    } else {
        /* If item is not a leaf, the node is desactivated, we put it in grey. */
        console.log("We desactived the node: " + lastClicked.html().trim().substring(0, 14));
        lastClicked.addClass("nodeDeleted").html(""); // And we erase the name of the node.
    }
}

这是更新的 fiddle :http://jsfiddle.net/ndt02yjc/5/

Last edit 处理一个项目的删除，该项目在第一次删除时不是叶子，但在进一步尝试时是叶子