jQuery TreeTable Plugin

http://ludo.cubicphuse.nl/jquery-treetable/#configuration

<table id="data_table" class="table">
  <thead>
	<tr>
	  <th>ID</th>
	  <th>Name</th>
	  <th>Description</th>
	  <th>Link From</th>
	  <th>Created Time</th>
	  <th>Clicks</th>
	</tr>
  </thead>
  <tbody>
	<?php
	foreach($groups as $group):
	?>
	<tr data-tt-id="<?=$group->title?>">
	  <td><?=$group->title?></td>
	  <td></td>
	  <td></td>
	  <td></td>
	  <td><?=$group->max_time?></td>
	  <td></td>
	</tr>

	  <?php
	  $links = $group->links;
	  foreach($links as $link):
	  ?>

	  <tr data-tt-id="<?=$link->id?>" data-tt-parent-id="<?=$group->title?>">
		<td><?=$link->id?></td>
		<td><?=$link->title?></td>
		<td><?=$link->description?></td>
		<td><?=$link->link_from?></td>
		<td><?=$link->createdtime?></td>
		<td><?=$link->clicks?></td>
	  </tr>

	  <?php endforeach; ?>

	<?php endforeach; ?>

  </tbody>
</table>

Javascript:

$table.treetable({
	expandable: true 
});

Custom CSS:

table.treetable tbody tr:hover td {
  background: #C3C3C3;
}

table.treetable tbody tr.selected td {
  background: #00A2E8;
}

Compelete Usage:

var table = {
	get_table: function(){
		return $("#data_table");
	}, 
	init: function(){
		var wrap = this;
		var $table = wrap.get_table();

		$table.treetable({
			expandable: true 
		});

		wrap.refresh();
	}, 
	refresh: function(){
		var wrap = this;
		wrap.clear();
		wrap.get_links();
	}, 
	clear: function(){
		var wrap = this;
		var $table = wrap.get_table();

		if(root_nodes.length > 0){
			for(var i = 0; i < root_nodes.length; i++){
				$table.treetable("removeNode", root_nodes[i]);
			}
		}

		root_nodes = [];
	}, 
	get_links: function(){
		var wrap = this;
		var params = {
			keyword: $("#keyword").val(), 
			from_date: $("#from_date").val(), 
			to_date: $("#to_date").val()
		}

		$.get(base_url + 'index.php/api/tracking/links', params, function(data){
			wrap.show(data.response);
		});
	}, 
	show: function(data){
		var wrap = this;
		var $table = wrap.get_table();
		var $body = $table.find('tbody').children().remove().end();

		for(var i = 0; i < data.length; i++){
			var group = data[i];
			var row = 
				'<tr data-tt-id="' + group.title + '">' + 
					'<td>' + group.title + '</td>' + 
					'<td></td>' + 
					'<td></td>' + 
					'<td></td>' + 
					'<td>' + group.max_time + '</td>' + 
					'<td></td>' + 
					'<td></td>' + 
				'</tr>'
			;

			//$("#tree").treetable("collapseNode", "42")
			$table.treetable("loadBranch", null, row);
			root_nodes.push(group.title);

			var links = group.links;
			var node = $table.treetable("node", group.title);
			//console.log(links);
			for(var j = 0; j < links.length; j++){
				var link = links[j];
				var row = 
					'<tr data-tt-id="' + link.id + '" data-tt-parent-id="' + group.title + '">' + 
						'<td>' + link.id + '</td>' + 
						'<td>' + link.title + '</td>' + 
						'<td>' + link.description + '</td>' + 
						'<td>' + link.link_from + '</td>' + 
						'<td>' + link.createdtime + '</td>' + 
						'<td>' + link.clicks + '</td>' + 
						'<td>' + 
							'<div class="dropdown">' + 
			                    '<a data-toggle="dropdown" href="#" class="btn btn-info">Action</a>' +
			                    '<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">' +
			                      '<li><a href="' + link.id + '" class="edit">Edit</a></li>' +
			                      '<li><a href="' + link.id + '" class="delete">Delete</a></li>' +
			                    '</ul>' +
			                  '</div>' +
						'</td>' + 
					'</tr>'
				;

				$table.treetable("loadBranch", node, row);
			}
		}

		wrap.loaded();
	}, 
	loaded: function(){
		var wrap = this;
		var $table = wrap.get_table();

		$table.treetable("collapseAll");

		$table.find('tbody tr').on('click', function(e){
			var $row = $(this);
			
			if($row.hasClass('branch') == false){
				if($row.hasClass('selected') == false){
					$table.find('tbody tr.selected').removeClass('selected');
					$row.addClass('selected');
				}

				selected_id = $row.attr('data-tt-id');
				console.log(selected_id);

				var url = 'http://t.rend.tw/?i=';
				url += Base64.encode(selected_id);
				$('#url').val(url);
			}
		});

		//Init action menu
		$table.find('tbody tr td .edit').on('click', function(e){
			e.preventDefault();
			if(selected_id == 0){
				alert('Please select a link');
				return false;
			}

			action = 'update';
			link.clear();
			link.get_link(selected_id);
			$('#md_edit').modal()
				.find('.modal-title').html('Edit Link').end();
		});

		$table.find('tbody tr td .delete').on('click', function(e){
			e.preventDefault();
			if(selected_id == 0){
				alert('Please select a link');
				return false;
			}

			var msg = 'Are you sure to delete this link?';
			if(confirm(msg) == true){
				link.delete_link(selected_id);
			}
		});
	}
}