JQuery/HTML5:组织结构图，如何使用该插件正确删除节点

JQuery/HTML5 : Organisational Chart, how to delete a node properly with this pluggin?

本文关键字：插件 何使用 节点 删除 HTML5 结构图 JQuery      更新时间：2023-09-26

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

事情是这样的:

  • 我成功地做了双击事件来改变节点的名称，并正确地插入这个插件。

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

  • 当我删除一个节点(而不是一个叶子)时，没有问题，节点变成灰色并失去他的名字;但是当我想删除一个叶子时，"节点"消失了，但"黑线"保留了下来。

我不知道如何在同一时间让这些行消失…

delete函数是这样的:

    /* 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/

提前谢谢你，干杯!

Valentin，

我首先查看了您使用的插件生成的结构，例如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函数来处理不同的情况:

  • 如果所选项目有兄弟姐妹(同级别的其他人)，我们只需要从所选项目的行之前的表行中删除2行:一个right top和left top(参见带有这种行的表行来理解)

  • 如果选定的项目没有兄弟姐妹，那么您可以使用这些行删除表行，但仍将保留表行(形状之间的线由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.
    }
}

这里是提琴更新:http://jsfiddle.net/ndt02yjc/5/

最后一次编辑处理一个项的删除，该项在第一次删除时不是叶子项，但在进一步尝试时是叶子项

相关文章：