RockTree jQuery Extension

RockTree is a jQuery TreeView plugin written specifically for RockChMS. We couldn't find a good TreeView solution that supported multi-select, that looked good, and that implemented Bootstrap 3, so we wrote our own.

Basic Usage

$('#some-element').rockTree();

Options

Setting Name	Data Type	Description
id	string	Represents the numeric Id or Guid of a node. This option will be used in combination with the restUrl option to pre-fetch data.
selectedIds	array	Represents the set of Ids or Guids that should be pre-selected after the tree's data is loaded.
expandedIds	array	Represents the set of Ids or Guids of tree nodes that should be pre-fetched and expanded after the tree's data is loaded.
restUrl	string	The REST endpoint that the tree will use to fetch data from.
restParams	string	Additional query string parameters to be passed along with each request.
local	array	Represents a hierarchical data structure that RockTree will attempt to map into its internal data set.
multiselect	bool	Determines whether or not more than one tree node can be selected at a time.
loadingHtml	string	Represents the HTML that will be rendered when a node's content is being loaded remotely.
iconClasses	object	A hash of class names. Valid properties are branchOpen, branchClosed and leaf.
mapping	object	A hash including an array of properties to include in the tree markup as data-* attributes called include and a function called mapData that can be overridden to provide custom data mapping functionality.
onSelected	array	An array of event names that will be triggered by the RockTree instance's $el property when a node is selected.

Local or Remote data

RockTree will attempt to load data from any REST endpoint it is configured to point to. Based on the restUrl, the id and the restParams options, RockTree will construct a URL and fire a GET request.

$('#some-element').rockTree({
    id: 1,
    restUrl: '/api/groups',
    restParams: '?groupType=1'
});

Alternatively, RockTree can be initialized with an array of objects if local data is being supplied.

$('#some-element').rockTree({
    local: [
        {
            id: 1,
            name: 'George',
            hasChildren: false
        },
        {
            id: 2,
            name: 'Samuel',
            hasChildren: true,
            children: [
                {
                    id: 3,
                    name: 'Joey',
                    hasChildren: false
                }
            ]
        }
    ]
});

Events