Skip to content

consected/jsTreeTable

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jsTreeTable is a clone of jQuery treetable. I wrote it, because integrating the original with Atlassian products was too complicated. This version is very light weight and provides some helper functions for dynamic tables.

Features

  • unobtrusive
  • light weigth
  • self contained: no external images, css ...
  • helper functions for dynamic tables
  • jQuery treetable compatible

Requirements

Some version of jQuery, i.e.

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

If you want to use the slider function, some version of jQuery UI, i.e.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

jsTreeTable HEAD

<script src="http://culmat.github.io/jsTreeTable/treeTable.js"></script>

or any release.

<script src="http://culmat.github.io/jsTreeTable/release/treeTable.1.0.js"></script>

jsTreeTable registers itself under the variable com_github_culmat_jsTreeTable. You will want to declare a short hand alias or, if no conflicts exist register all methods in the scope of your choice:

// define a short hand
var jsTT = com_github_culmat_jsTreeTable
alert(jsTT.jsTreeTable)

// register on the window object
com_github_culmat_jsTreeTable.register(this)
alert(jsTreeTable)

Providing data

Either provide pre rendered tables (see treeTable Example)...

<table>
  <tr data-tt-id="1">
    <td>Parent</td>
  </tr>
  <tr data-tt-id="2" data-tt-parent-id="1">
    <td>Child</td>
  </tr>
</table>

... or dynamically create the table from any data structure, e.g. JSON obtained by an AJAX call. See makeTree API.

API

depthFirst

Traverses a tree depth first, applying a given function to each node.

function depthFirst(tree, func, childrenAttr)
paramter description required default
tree the tree data as array of roots X
func the function to apply recursivly X
childrenAttr the attribute used to recursivly dig into the tree 'children'
Returns the input parameter tree.

Example

makeTree

Transform a flat data structure into a hierarchical tree structure using id and parent attributes.

function makeTree (data, idAttr, refAttr, childrenAttr)
paramter description required default
data the flat data as array X
idAttr the attribute used to identify a node 'id'
refAttr the attribute used by the children to reference their parent 'parent'
childrenAttr the attribute used to build the hierarchical tree structure 'children'
Returns an array of tree roots.

Example

renderTree

Renders a tree data structure into a dom table with css class jsTT, seeting the following attributes

  • data-tt-id
  • data-tt-level
  • data-tt-isnode / data-tt-isleaf
  • data-tt-parent-id
function renderTree(tree, childrenAttr, idAttr, attrs, renderer, tableAttributes)
paramter description required default
tree the tree data X
childrenAttr the attribute used to navigate the hierarchical tree structure 'children'
idAttr the attribute used to identify a node 'id'
attrs a map of attribute names and labels to be rendered all attributes except the childrenAttr, label = name
renderer a rendreing function for custom rendering
tableAttributes additional table attributes (ie id or class). Can be useful for styling. The css class jsTT will always be added.

Returns an html table as javascript object.

Example

attr2attr

A simple helper funtion that copies attributes from javascript objects onto the DOM.

function attr2attr(nodes, attrs)
paramter description required default
nodes an array of nodes to process X
attrs an array of attribute names X
Returns the input parameter nodes

treeTable

Adds functions to expand / collapse a tree table. Styling needs to be done externally.

function treeTable(table)
paramter description required default
table the table dom node with data-tt-* attributes X

Returns the input parameter nodes

Example

appendTreetable

function 	(tree, options)
paramter description required default
tree the tree data X
options see below
option description required default
idAttr the attribute used to identify a node 'id'
childrenAttr the attribute used to navigate the hierarchical tree structure 'children'
controls controls you want to add to the top of the table
mountPoint where to append the table into the DOM $('body')
depthFirst funtion to be applied prior to rendering see depthFirst
renderer see renderTree
renderedAttr see renderTree
tableAttributes see renderTree
replaceContent wether to empty the mount point before appending, useful for activity indicators false
initialExpandLevel 1 .. infinity
slider wether to display an expand slider control false

Returns an html table as javascript object obtained by calling renderTree

Example

jsTreeTable

A property holding the version of jsTreeTable

alert(com_github_culmat_jsTreeTable.jsTreeTable)

Example

Source

Github project

Alternatives

SlickGrid

jQuery treetable

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.2%
  • HTML 8.5%
  • CSS 2.3%