Как я могу отобразить иерархическую организационную диаграмму с директорами, менеджерами и персоналом, используя веб-формы и 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>

Я хотел бы использовать веб-формы (c #) для создания динамических организационных диаграмм на основе данных в XML-документе, который я передаю. Я попробовал несколько методов с различными уровнями дерьма.

Мне кажется, что решение должно включать HTML-таблицу (Cringe). Главным образом потому, что положение каждого сотрудника является значительным, и мы не можем заставить их плавать вокруг окна браузера (пожалуйста, исправьте меня, если вы не согласны). Главный сотрудник, Аскли Кинг, был бы главной ячейкой с круговой шкалой X. Джим Уордон был бы следующей строкой с таким же кольспаном, поскольку у него нет современников в этом XML-документе. Джефф Риз и Мэри Хибдон будут следующими рядами с кольспансом х / 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>

Для предварительного просмотра сохраните xslt из http://pastebin.com/f6597d519

Добавить <?xml-stylesheet href="foo.xslt" type="text/xsl"?> наверх ваших сотрудников XML, и откройте в браузере. На практике вы можете захотеть преобразовать на сервере, чтобы избежать проблем совместимости. Чтобы сделать это в C #, см. Как применить таблицу стилей XSLT в C #

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 не поддерживает диаграммы org.