UX Rocket Treelist

UX Rocket Treelist component provides an expandable/collapsible row systems for the tables. Semantically, all rows are in the same level but visually they are bound with id and parent/child relation.

Installation

According to your usage, you can use directly __dist__ version or, add __lib__ to your project. First you need to checkout the packages from either npm or bower

__npm__
``Shell
npm install uxrocket.treelist
`

or __bower__
`Shell
bower install uxrocket.treelist
`

For Development


If you want to add your project source, import JS and Sass files in __lib__ folder to your project. For the Sass files, use _uxrocket-treelist.scss partial file instead of uxrocket.treelist.scss

`SCSS
// styles.scss
// Plugin styles
@import "/lib/_uxrocket-treelist";

// Your project styles
`

`JS
// app.js
// If you use Grunt or Gulp, add /lib/uxrocket.treelist.js to your config
// For Codekit or similar tools
// @codekit-append '/lib/uxrocket.treelist.js'
`

For Direct Usage


In your __HTML__ after jQuery add uxrocket.treelist.min.js and add styles to your head
`HTML

...



...

`

Usage

Sample HTML structure as follows,

`HTML







































Name	Version	Type
UX Rocket Treelist	0.1.0	Plugin
jQuery	Latest	Dependency
UX Rocket Autocomplete	2.0.2	Plugin
jQuery	Latest	Dependency
UX Rocket Modal	0.8.0	Plugin


`

After preparing above HTML, bind plugin to your table
`JavaScript
$(function(){
// standard
$('.treelist').treelist();
});
`
By default, _treelist_ does not have a configurable options. You can define, onReady and onRemove callbacks for related events. However, you can add options via data attributes to nodes.

$3

Property | Default | Description
-------------- | ----------- | ------------------------------------------------------------------------
header | null | Custom class names for parent rows
content | null | Custom class names for child rows
toggle | null | Custom class names for toggle

Data Attributes | Description
----------------- | ------------------------------------------------------------------------
data-on-expand | Function/method called after parent row expaned. Applies to parent row
data-on-collapse | Function/method called after parent row collapsed. Applies to parent row
data-active | If set true` parent row and its sub rows will be expanded on load.
data-uxrtl-id | Generic ID attribute for rows. Only required if row is a parent
data-uxrtl-parent | Parent ID for the child rows. Required for obtaining parent/child relation
data-on-ready | Function called after plugin binded to table. Applies to table itself
data-on-remove | Function called when plugin destroyed. Applies to table itself

Callback |  
-------------- | ------------------------------------------------------------------------
onReady | Function called after plugin binded to table. Applies to table itself
onRemove | Function called when plugin destroyed. Applies to table itself

Events |  
---------------- | -----
uxrready | Triggered when plugin bind to table
uxrexpanded | Triggered when a row expanded
uxrcollapsed | Triggered when a row collapsed
uxrleafcollapsed | Triggered when a child row, is also a parent row, collapsed
uxrremove | Triggered when plugin destroyed/removed from table

$3

Method | Description
----------------------------- | -------------------------------------------------------
$(selector).treelist(options) | Binds plugin to a table
$.uxrtreelist | Plugin name
$.uxrtreelist.version | Displays the plugin version
$.uxrtreelist.settings | Displays the default plugin settings