23 | October | 2014 | Rex's Personal Site

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>

<thead>

<tr>

<th>Description</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>

</tr>

<?php

$links = $group->links;

foreach($links as $link):

<tr data-tt-id="<?=$link->id?>" data-tt-parent-id="<?=$group->title?>">

<td><?=$link->title?></td>

<td><?=$link->description?></td>

<td><?=$link->createdtime?></td>

<td><?=$link->clicks?></td>

</tr>

<?php endforeach; ?>

</tbody>

</table>

Javascript:

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

$table.treetable({

expandable: true

});

Custom CSS:

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

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

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);
			}
		});
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

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>' + group.max_time + '</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);

}

});

}

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Daily Archives: 10/23/2014

jQuery TreeTable Plugin