jquery 人员关系图

宁为泽 3周前 13浏览 0评论

jQuery是一个广泛使用的JavaScript库,用于HTML文档遍历、处理以及事件处理。它已经成为现今Web开发中不可或缺的重要工具。

一个比较有价值的jQuery插件是人员关系图插件,它可以帮助我们轻松地在网页中展示公司或组织的架构关系。下面是一个简单的例子,展示如何使用这个插件:

  
  <!DOCTYPE html>
  <html>
    <head>
      <title>人员关系图</title>
      <link rel="stylesheet" href="//cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
      <link rel="stylesheet" href="jquery.orgchart.css">
    </head>
    <body>
      <div id="chart-container"></div>

      <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
      <script src="jquery.orgchart.min.js"></script>
      <script>
        $(function() {
          $('#chart-container').orgchart({
            'data' : {'name': 'Jack',
                      'children': [
                        {'name': 'Bob', 'title': 'Manager'},
                        {'name': 'Peter', 'title': 'Manager'},
                        {'name': 'John', 'title': 'Manager'},
                        {'name': 'Tony', 'title': 'Manager'}
                      ]
                    },
            'nodeContent': 'title'
          });
        });
      </script>
    </body>
  </html>
  

在上面的例子中,我们首先在中引入了两个CSS文件,一个是jQuery Mobile的样式文件,另一个是人员关系图插件的样式文件。随后在中插入一个

,用于展示人员关系图。最后在