jTree is a complex jquery plugin that can be easily integrated on any page with some easy to use configurations that can allow you to create or load family tree in real time.

Family tree can be loaded in two formats

  • Read Only Format allow user to view family tree without editing information of any member.
  • Editable Format allow user to view and edit family tree information.

Here is some basic usage code that can allow you to integrate family tree in your application.


<script type="text/javascript">
var dn = 'http://jtree.bootstrapkits.com/'; // url where jTree script will run
var hd = 'tree/handler.php'; // basic api in php for saving / deleting tree nodes
var sconnects = 'tree/savecon.php'; // basic api in php for saving node connections / relationships
var lhandler = 'tree/load.php'; // basic api in php for loading family tree back
var chandler = 'tree/lconnects.php'; // basic api in php for loading tree relationships / connects
var strokeColor = '#005b0f'; // line color
var hoverPaintStyle = '#ff0000'; // hover color
var strokeLineWidth = 1; // width of line
var hoverstrokeLineWidth = 2; // width of line
var connectStyle = 'Flowchart'; // Bezier, StateMachine, Flowchart,
var offsetdiff = 20; // horizontal space between two nodes
var defaultUName = 'administrator'; // default node username
var defaultFName = 'Shane'; // default node first name
var defaultSName = 'Michael'; // default node last name
var redirectPageName = 'tree.php'; // redirect page info
var familyID = '0'; // id of tree to load, if 0 it means its new tree otherwise will try to load family tree
var msgLabel = 'treemsg';
var smoothScroll = false; // enable or disable smooth scrolling
var readOnly = false; // enable or disable readonly
// plupload settings
var plUploadHandler = "tree/modules/uploadhandler.php";
var plupload_flash_url = "assets/plugins/plupload/js/plupload.flash.swf";
var plupload_silverlight_url = "assets/plugins/plupload/js/plupload.silverlight.xap";
var maxFileSize = "10mb";
// default image url
var defaultThumbUrl = "../assets/images/holder.png"