ExtTable

About Fancytree table and gridnav extension.

• Status: beta
• example
• example

Render tree as a table (aka tree grid) and support keyboard navigation in a grid with embedded input controls.

Options

Options of the ext-table extension:

• checkboxColumnIdx, type: {integer}, default: null
  Render the checkboxes into the 1st column.

• indentation, type: {integer}, default: 16
  Indent every node level by 16px.

• nodeColumnIdx, type: {integer}, default: 0
  Render node expander, icon, and title to column #0

Options of the ext-gridnav extension:

• autofocusInput, type: {boolean}, default: false
  Focus first embedded input if node gets activated.

• handleCursorKeys, type: {boolean}, default: true
  Allow UP/DOWN in inputs to move to prev/next node.

Events

• renderColumns

Methods

• n.a.

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.table.js and optionally jquery.fancytree.gridnav.js:

  <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
  <link href="skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="js/jquery.fancytree.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.gridnav.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.table.js" type="text/javascript"></script>

we also define an empty table with its headers

<table id="tree">
	<colgroup>
	<col width="30px"></col>
	<col width="30px"></col>
	<col width="*"></col>
	<col width="50px"></col>
	<col width="30px"></col>
	</colgroup>
	<thead>
		<tr> <th> </th> <th>#</th> <th></th> <th>Key</th> <th>Like</th> </tr>
	</thead>
	<tbody>
	</tbody>
</table>

The tree table extension takes care of rendering the node into one of the columns. Other columns have to be renderd in the renderColumns event:

$("#tree").fancytree({
	checkbox: true,
	titlesTabbable: true,        // Add all node titles to TAB chain
	source: SOURCE,
	extensions: ["table", "gridnav"],
	table: {
		checkboxColumnIdx: null, // render the checkboxes into the this column index (default: nodeColumnIdx)
		customStatus: false,	 // true: generate renderColumns events for status nodes
		indentation: 16,         // indent every node level by 16px
		nodeColumnIdx: 0         // render node expander, icon, and title to this column (default: #0)
	},
	gridnav: {
		autofocusInput:   false, // Focus first embedded input if node gets activated
		handleCursorKeys: true   // Allow UP/DOWN in inputs to move to prev/next node
	},

	renderColumns: function(event, data) {
		var node = data.node,
			$tdList = $(node.tr).find(">td");

		// (index #0 is rendered by fancytree by adding the checkbox)

		// 
		$tdList.eq(1)
			.text(node.getIndexHier())
			.addClass("alignRight");

		// (index #2 is rendered by fancytree)
		// Make the title cell span the remaining columns, if it is a folder:
		if( node.isFolder() ) {
			$tdList.eq(2)
				.prop("colspan", 3)
				.nextAll().remove();
			return;
		}
		// ...otherwise render remaining columns

		$tdList.eq(3).text(node.data.myCustomData);
		$tdList.eq(4).html("<input type='checkbox' value='" + node.key + "'>");
	}
});

Recipes

[Howto] Make a table scrollable

Wrap the table into a scrollable <div>

<div id="scrollParent" style="height: 150px; overflow: auto;">
	<table id="tree">
		...
	</table>
</div>

and tell Fancytree to use this as scrollParent:

$("#tree").fancytree({
	extensions: ["table", "gridnav"],
	source: SORUCE,
	scrollParent: $("#scrollParent"),
	table: {
		...
	},

Alternativley, we can use the browser viewport as scroll parent:

$("#tree").fancytree({
	...
	scrollParent: $(window),
	...