Пример построения организационной диаграммы в SharePoint 2010 / 2013 на JavaScript (часть 1)
Данные в любой информационной системе хранятся в виде, который более всего рационален для этого самого хранения, доступа и удобным оперированием данными для прикладных и аналитических целей. В большинстве случаев все сводится к таблицам или объектам.
В SharePoint подавляющая составляющая важных для бизнеса данных хранится в списках или является сторонней информацией, получаемой через веб-сервисы.
С логической стороны, если абстрагироваться от технологических составляющих, можно провести параллель между списками SharePoint и таблицами. А информацию из таблиц обычно хочется визуализировать, особенно, если эта самая информация сложно подчинена сама же себе и есть элемент иерархии.
В рамках данной минисерии статей я создам пример визуализации иерархических данных из списков SharePoint на JavaScript.
Сразу оговорюсь, что цель - именно в получении данных из списков, и что в постановке задачи не стоит создание организационной структуры предприятия как такового, хотя в редакции SharePoint, обделенной User Profile Services, а именно Foundation можно построить и "заменитель" стандартного функционала старших братьев.
Итак, допустим у нас есть список, в котором представлен перечень, пусть будет, подразделений организации. Подразделения в списке имеют подчиненность один ко многим. Т.е. у подразделений может быть произвольный перечень подчиненных подразделений, а у подчиненного только одно родительское. Естественно, такая связь задается путем lookup'а на этот же список, т.е. атрибута ссылающегося на запись другого подразделения.
В качестве желаемого результата мы хотим получить страницу на портале, на которой блоками будут нарисованы подразделения, а стрелками обозначены связи, кто под кем находится.
Приступаем...
Для работы с данными будем использовать SPServices (о данной библиотеке я уже не раз писал, например, вот).
Для визуализации возьмем плагин к jQuery jOrgChart.
jOrgChart умеет превращать такое:
<ul id="org" style="display:none"> <li>Food <ul> <li>Beer</li> <li>Vegetables <ul> <li>Pumpkin</li> <li><a href="http://tquila.com" target="_blank">Aubergine</a></li> </ul> </li> <li>Bread</li> <li>Chocolate <ul> <li>Topdeck</li> <li>Reese's Cups</li> </ul> </li> </ul> </li> </ul>
в такое:
А мы, в свою очередь научим его превращать в такое:
Но в рамках следующей статьи. Исходники примера полагаются.
UPD: Продолжение
Опубликовано: 31.01.2014
Автор: Андрей Кольтяков