http://ludo.cubicphuse.nl/jquery-treetable/#configuration
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<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:
1 2 3 |
$table.treetable({ expandable: true }); |
Custom CSS:
1 2 3 4 5 6 7 |
table.treetable tbody tr:hover td { background: #C3C3C3; } table.treetable tbody tr.selected td { background: #00A2E8; } |
Compelete Usage:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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></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); } }); } } |