代码之家 › 专栏 › 技术社区 › Byron Sommardahl

我如何使用webforms和c_来显示具有主管、经理和员工的分层组织结构图?

hierarchy webforms xml c#

Byron Sommardahl · 技术社区 · 15 年前

假设我有一个包含员工和向他们报告的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表(crin)。主要是因为每个员工的职位都很重要,我们不能让他们在浏览器窗口周围浮动(如果您不同意,请纠正我)。顶级雇员askley King将是顶级单元格,colspan为x的a。Jim Wardon将是下一行,具有相同的colspan,因为他在该xml文档中没有任何同期性。杰夫·里斯和玛丽·希顿将是下一排,跨栏为x/2。然后,下一排有下一个员工,我开始陷入如何完成它的困境。

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

3 回复 | 直到 14 年前

Community CDub 8 年前

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>

若要预览,请保存来自的XSLT http://pastebin.com/f6597d519

添加 <?xml-stylesheet href="foo.xslt" type="text/xsl"?> 到员工XML的顶部,并在浏览器中打开。实际上,您可能希望在服务器上进行转换以避免兼容性问题。要在c中执行此操作,请参见 How to apply an XSLT Stylesheet in C#

JKM 14 年前

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

XML在线演示的层次结构图如下: http://organization.unifosys.com/demo.aspx

Shiraz Bhaiji 15 年前

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

我自己没有用过。

据我所知,mscharts似乎不支持组织结构图。