Adatum
Ноя
19
2015

Родословное дерево на Html и JavaScript

3242
ДемоСкачать
Пример того как построить родословное дерево разветвлённой структуры, к примеру чтобы на одном дереве отобразить насколько семей с несколькими предками.
Работает на скрипте org Diagram v2.0.20 от Basic Primitives Inc.

Пользователи прописываются в файле famdata.js.
Поля:
id: 29
title — Указываем Фамилию Имя Отчество
label — поле email
description — Описание человека
phone — поле email
email — поле email
image: «photos/e.png» — фото человека
itemTitleColor: «#ffc0cb» — Цвет заголовка (например красный для девочек синий для мальциков)
parents: [3, 4] — указываются id родителей, если это родитель этот параметр не указывается.

var famdata = [
    { id: 29, title: "Иванов Дмитрий Сергеевич ", label: "Thomas Williams", description: "Р.Хакассия, П.Майна, 17.05.2015-17.05.2215", phone: "262-215-7998", email: "jameholt@name.com", image: "photos/e.png", itemTitleColor: "#c8e4fb" },
	 { id: 28, title: "Иванов Дмитрий Сергеевич ", label: "Thomas Williams", description: "Р.Хакассия, П.Майна, 17.05.2015-17.05.2215", phone: "262-215-7998", email: "jameholt@name.com", image: "photos/e.png", itemTitleColor: "#c8e4fb" },
	 { id: 30,parents: [29, 28], title: "", label: "Thomas Williams", description: "", phone: "262-215-7998", email: "jameholt@name.com", image: "", itemTitleColor: "#c8e4fb" },
	
	{ id: 3, title: "Иванов Дмитрий Сергеевич ", label: "Thomas Williams", description: "Р.Хакассия, П.Майна, 17.05.2015-17.05.2215", phone: "262-215-7998", email: "jameholt@name.com", image: "photos/e.png", itemTitleColor: "#c8e4fb" },

    { id: 4, title: "Белозёров Боян Филиппович", label: "Thomas Williams", description: "4, VP, Server & Tools Marketing and Solutions", phone: "904-547-5342", email: "thomwill@name.com", image: "photos/r.png", itemTitleColor: "#c8e4fb" },
   
   { id: 5, title: "David Kirby", label: "David Kirby", description: "5, AGM, Infrastructure Server and IT Pro Audience Marketing", phone: "614-395-7238", email: "davikirb@name.com", image: "photos/t.png", itemTitleColor: "#c8e4fb" },
   { id: 6,   title: "Lynette Maloney", label: "Lynette Maloney", description: "6, GM, Name.com Experience Platforms and Solutions", phone: "540-822-3862", email: "lynemalo@name.com", image: "photos/y.png", itemTitleColor: "#ffc0cb" },

	
   { id: 10, parents: [3, 4], title: "Heather Simmons", label: "Heather Simmons", description: "10, GM, Name Learning", phone: "620-368-3620", email: "heatsimm@name.com", image: "photos/p.png", itemTitleColor: "#c8e4fb" },
    { id: 11, parents: [3, 4], title: "Steven Lacombe", label: "Steven Lacombe", description: "11, GM, Platform Strategy", phone: "805-800-7397", email: "stevlaco@name.com", image: "photos/a.png", itemTitleColor: "#ffc0cb" },
   
   
   { id: 13, parents: [5, 6], title: "Шалдыбин Григорий Борисович", label: "Jean Kendall", description: "13, GM, DML Server Marketing", phone: "949-453-0415", email: "jeankend@name.com", image: "photos/d.png", itemTitleColor: "#c8e4fb" },
   { id: 14, parents: [5, 6], title: "Борисова Полина Виталиевна ", label: "Brad Whitt", description: "14, GM, Application Platform and Development Marketing", phone: "502-528-6379", email: "bradwhit@name.com", image: "photos/f.png", itemTitleColor: "#c8e4fb" },

	{ id: 25, parents: [11, 14], title: "Наталья Васильевна Тронина", label: "Ralph Mercer", description: "22, GM, DML Server Strategy", phone: "814-327-5895", email: "ralpmerc@name.com", image: "photos/c.png", itemTitleColor: "#c8e4fb" },
	{ id: 22, parents: [11, 14], title: "Наталья Васильевна Тронина", label: "Ralph Mercer", description: "22, GM, DML Server Strategy", phone: "814-327-5895", email: "ralpmerc@name.com", image: "photos/c.png", itemTitleColor: "#c8e4fb" },
    { id: 23, parents: [11, 14], title: "Дидиченко Варлаам Павлович", label: "Howard Williams", description: "23, GM, User Experience", phone: "703-740-8612", email: "howawill@name.com", image: "photos/v.png", itemTitleColor: "#c8e4fb" },
    { id: 24, parents: [11, 14], title: "Nathalie Escobedo", label: "Nathalie Escobedo", description: "24, GM, DML Server Business Intelligence", phone: "504-555-8165", email: "nathesco@name.com", image: "photos/b.png", itemTitleColor: "#c8e4fb" },

	    { id: 26, parents: [13], title: "Howard Williams", label: "Howard Williams", description: "23, GM, User Experience", phone: "703-740-8612", email: "howawill@name.com", image: "photos/v.png", itemTitleColor: "#c8e4fb" },
];

аватарки взял от сюда http://randus.ru

Похожие статьи

Оставить комментарий