0

我正在尝试为我的 web 应用程序构建一个编辑器，它具有可编辑的层次结构，并且我正在考虑一些具有开放 API 来动态操作层次结构的组织图表可视化（或库）。我的要求是它必须是离线的，所以谷歌可视化已经出来了，我花了一些时间调整基本原语，发现它没有提供像“获取选定项目”这样简单的方法调用。我花了几天的时间寻找无济于事，所以这很令人沮丧。有谁知道我可以使用的任何简单的小部件或库？谢谢！

4

1 回答 1

0

让我知道以下代码段是否可以帮助您入门。只需将其复制并粘贴到 HTML 文件中

<html>
<head>
    <title>GetOrgChart</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
    <script type='text/javascript' src="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.js"></script>
    <link rel="stylesheet" type="text/css" href="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.css" />

    <style type='text/css'>
        html, body {margin: 0px;padding: 0px;height: 100%;overflow: hidden;}
        #people {width: 100%;height: 100%;}
    </style>
</head>
<body>
    <table id="peopleTable" style="display: none;">
        <tr>
            <th>id</th>
            <th>parent id</th>
            <th>Name</th>
            <th>Title</th>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td>Lesley Holmes</td>
            <td>CEO</td>
        </tr>
        <tr>
            <td>2</td>
            <td>1</td>
            <td>Colin Patricia</td>
            <td>Manager</td>
        </tr>
        <tr>
            <td>3</td>
            <td>1</td>
            <td>Derek Cork</td>
            <td>Manager</td>
        </tr>
    </table>

    <div id="people"></div>

    <script type='text/javascript'>
        $('#people').getOrgChart({
            dataSource: document.getElementById("peopleTable")
        });
    </script>
</body>
</html>
于 2014-03-18T21:29:13.577 回答