Options

Name Default Description
showwebs true Display or not web sites
rootweburl Url of site collection root web. If empty - current web site (host web for app) will be used as a starting node.
showlists true Display or not lists
filterlistsByTemplate null Specify list template id if you what to filter lists. For example, only Events list or Document Libraries. http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.splisttemplatetype.aspx
filterlistsByCT Specify content type name if you what to filter lists. For example, lists that have only certain custom content type
useInSPApp false Defines whether plugin used inside an App or SharePoint site (web part, etc.)
links true Specify whether nodes are links to web sites or lists
selectable none Defines what can be selectable. Options: none, lists, webs, all
checkable none Defines what can be checked. Options: none, lists, webs, all

Tutorial

1. Include jQuery
<script src="jquery.min.js"></script> 

2. Follow the instructions on http://www.jstree.com, download and include jsTree JavaScript and CSS files.
<script src="jstree.js"></script>
<link href="style.css" />

3. Add <div> as a container for a tree
<div id="siteTree"></div>

4. Now you can create a tree using default settings
$("#siteTree").sptree(); 

5. You can use all available options for jsTree except core.data to configure the plugin. core.data option will be replaced by spTree plugin to get SharePoint data
$("#siteTree").sptree({
	"core" : {
		"multiple" : false,
		"animation" : 0
	}
});

6. pTree plugin options should be specified using spTree option
$("#siteTree").sptree({
	"core": {
		"multiple": false,
		"animation": 0
	},
	"sptree": {
		rootweburl: window._spPageContextInfo.siteAbsoluteUrl,
		selectable: 'none',
		checkable: 'lists',
		useInSPApp: true
	}
});

7. After initialization you can listen for events and interact with the tree using jsTree plugin tools
var $tree = $("#siteTree").sptree({
	"core": {
		"multiple": false,
		"animation": 0
	},
	"sptree": {
		rootweburl: window._spPageContextInfo.siteAbsoluteUrl,
		selectable: 'none',
		checkable: 'lists',
		useInSPApp: true
	}
});
$tree.bind("loaded.jstree", function(event, data) {
	$tree.jstree('select_all');
});

Last edited Aug 12, 2014 at 3:04 PM by YuriLeontyev, version 10