put colvis controls in sidebar [experimental]

This commit is contained in:
Oliver Gorwits
2014-08-18 22:09:31 +01:00
parent d44e9dacb4
commit 173ea3853d
3 changed files with 51 additions and 23 deletions

View File

@@ -8,7 +8,6 @@ use URL::Encode 'url_params_mixed';
hook 'before' => sub {
my @default_port_columns_left = (
{ name => 'c_admin', label => 'Port Controls', default => '' },
{ name => 'c_port', label => 'Port', default => '' },
);
@@ -25,10 +24,11 @@ hook 'before' => sub {
{ name => 'c_vmember', label => 'VLAN Membership', default => '' },
{ name => 'c_power', label => 'PoE', default => '' },
{ name => 'c_ssid', label => 'SSID', default => '' },
{ name => 'c_nodes', label => 'Connected Nodes', default => '' },
{ name => 'c_nodes', label => 'Show Nodes', default => '' },
{ name => 'c_neighbors', label => 'Connected Devices', default => 'on' },
{ name => 'c_stp', label => 'Spanning Tree', default => '' },
{ name => 'c_up', label => 'Status', default => '' },
{ name => 'c_admin', label => 'Port Controls', default => '' },
);
# build list of port detail columns

View File

@@ -27,6 +27,7 @@
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var freeDate = moment().subtract( [% params.age_num %], '[% params.age_unit %]' );
var table = $('#dp-data-table').dataTable({
@@ -38,7 +39,6 @@ $(document).ready(function() {
},
"deferRender": true,
"order": [[ 1, "asc" ]],
"dom": 'C<"nd_clear-both">lfrtip',
"colVis": {
"exclude": [ 0 ]
},
@@ -611,6 +611,35 @@ $(document).ready(function() {
],
"data": [% results %]
});
// display the column show/hide buttons in the sidebar
var colvis = new $.fn.dataTable.ColVis( table );
var columns = colvis.s.dt.aoColumns;
// first remove existing controls, in case indexes have changed
$('#nd_column-controls').find('.nd_colvis-checkbox').remove();
if ( $.inArray( 'all', colvis.s.aiExclude ) === -1 ) {
for ( var i=0, iLen=columns.length ; i<iLen ; i++ ) {
if ( $.inArray( i, colvis.s.aiExclude ) === -1 ) {
var button = colvis.dom.buttons.shift();
if (columns[i]["name"] == "icon") {
continue;
}
$(button).addClass('nd_colvis-checkbox');
$(button).find('label').addClass('checkbox');
$(button).find('input').attr('id', columns[i]["name"]);
$(button).find('input').attr('name', columns[i]["name"]);
if (columns[i]["name"] == "c_nodes") {
$(button).find('span').text('Connected Devices');
}
$('#nd_column-controls').append( button );
}
}
}
});
//]]>
</script>

View File

@@ -56,26 +56,7 @@
<i class="nd_arrow-up-down-right icon-chevron-down icon-large"></i>
</label></span>
<div id="nd_columns" class="collapse in">
<ul class="nd_inputs-list unstyled">
[% FOREACH item IN vars.port_columns %]
[% NEXT IF item.name == 'c_admin' AND NOT user_has_role('port_control') %]
[% IF item.name == 'c_admin' OR item.name == 'c_nodes' %]
<li>
<label class="checkbox">
<input type="checkbox" id="[% item.name | html_entity %]"
name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] />
[% IF item.name == 'c_admin' %]
<span class="label label-info">[% item.label | html_entity %]</span>
[% ELSE %]
[% item.label | html_entity %]
[% END %]
</label>
</li>
[% ELSE %]
<input type="checkbox" id="[% item.name | html_entity %]"
name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] style="display:none;" />
[% END %]
[% END %]
<ul id="nd_column-controls" class="nd_inputs-list unstyled">
</ul>
</div>
</div>
@@ -147,6 +128,24 @@
</ul>
</div>
</div>
<ul class="nd_inputs-list unstyled">
[% FOREACH item IN vars.port_columns %]
[% NEXT IF item.name == 'c_admin' AND NOT user_has_role('port_control') %]
[% IF item.name == 'c_admin' OR item.name == 'c_nodes' %]
<li>
<label class="checkbox">
<input type="checkbox" id="[% item.name | html_entity %]"
name="[% item.name | html_entity %]"[% ' checked="checked"' IF params.${item.name} %] />
[% IF item.name == 'c_admin' %]
<span class="label label-info">[% item.label | html_entity %]</span>
[% ELSE %]
[% item.label | html_entity %]
[% END %]
</label>
</li>
[% END %]
[% END %]
</ul>
<div class="btn-group">
<button id="[% tab.tag %]_submit" type="submit" class="btn btn-info nd_sidebar-btn-drop">
<i class="icon-search icon-large pull-left nd_navbar-icon"></i> Update View</button>