如何使用 Webforms 和 C# 显示包含董事、经理和员工的分层组织结构图？

Question

假设我有一份包含员工以及向他们报告的人员的 XML 文档。像这样的事情：

<?xml version="1.0" encoding="utf-8" ?>
<employees>
  <employee>
    <id>1</id>
    <name>Ashley King</name>
    <title>Director</title>
    <directReports>
      <employee>
        <id>2</id>
        <name>Jim Warden</name>
        <title>Manager</title>
        <directReports>
          <employee>
            <id>3</id>
            <name>Jeff Reese</name>
            <title>Lead</title>
            <directReports>
              <employee>
                <id>4</id>
                <name>Leann Thompson</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>5</id>
                <name>Amber Herzer</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>6</id>
                <name>Ben Lively</name>
                <title>Staff</title>
                <directReports />
              </employee>
            </directReports>
          </employee>
          <employee>
            <id>3</id>
            <name>Mary Hibdon</name>
            <title>Lead</title>
            <directReports>
              <employee>
                <id>50</id>
                <name>Brandon Burns</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>55</id>
                <name>David Peck</name>
                <title>Staff</title>
                <directReports />
              </employee>
              <employee>
                <id>62</id>
                <name>Ben Lively</name>
                <title>Staff</title>
                <directReports />
              </employee>
            </directReports>
          </employee>
        </directReports>
      </employee>
    </directReports>
  </employee>
</employees>

我想使用 webforms (c#) 根据我提供的 xml 文档中的数据创建动态组织结构图。我尝试了几种不同程度的蹩脚方法。

在我看来，解决方案必须包含一个 html 表（畏缩）。主要是因为每个员工的职位都很重要，我们不能让他们浮动在浏览器窗口中（如果您不同意，请纠正我）。顶级员工 Askley King 将成为顶部单元格，其 colspan 为 X。Jim Wardon 将成为具有相同 colspan 的下一行，因为他在该 XML 文档中没有任何同时代人。 Jeff Reese 和 Mary Hibdon 将是下一行，其跨度为 x / 2。然后，下一行有下一个员工，我开始陷入如何完成它的困境。

你会怎么做？代码或概念......没有区别。我只需要指明正确的方向。

Answer 1

XML 喜欢递归。将节点一一布置或布置到某个巨大的表格网格中需要做大量工作——您的数据格式是分层的，您的处理方法也应该是分层的。

是的。试过了。我只是遇到麻烦了
让我思考最好的方法
做吧。我可以使用桌子。我可以用
CSS。绝对定位。但什么也没有
我在 HTML 中想出的确实是
为我工作。

XSLT 非常擅长将 xml 转换为 html。以下 xslt 将您的 xml 转换为一系列嵌套的 div 和表。我正在使用表格来使每个同事组保持一致。似乎是最简单的方法。

<xsl:template match="employee">
  <div class="wrapper">
    <div class="smallline" />
    <div class="box">
      <xsl:value-of select="name"/> <br/>
      <xsl:value-of select="title"/>
    </div>
    <xsl:if test="directReports/employee">
      <div class="smallline"> </div>
      <table>
        <tr>
          <xsl:for-each select="directReports/employee">
            <td> <xsl:apply-templates select="."  /> </td>
          </xsl:for-each>
        </tr>
      </table>
    </xsl:if>
  </div>
</xsl:template>

要预览，请从 http://pastebin.com/f6597d519 保存 xslt

添加
到员工 xml 的顶部，然后在浏览器中打开。在实践中，您可能希望在服务器上进行转换以避免兼容性问题。要在 C# 中执行此操作，请参阅如何在 C# 中应用 XSLT 样式表< /a>

Answer 2

有一个商业网络控件，有免费版本。
http://unifosys.com/chart4.net/

来自 XML 在线演示的分层图表位于此处：
http://organization.unifosys.com/demo.aspx

Answer 3

SmartDraw 这里有免费的组织结构图： http://www.smartdraw.com/specials/ppc/org-chart-software.htm?id=141414&gclid=CPSep4-a158CFYsz3god1VRybg

我自己没有使用过它们。

据我所知，msCharts 似乎不支持组织结构图。