Enable scrollable datatable header.

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10349 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
This commit is contained in:
phamt 2011-08-24 03:10:37 +00:00
parent 7a5a296e6c
commit 752cdb1dda
5 changed files with 69 additions and 44 deletions

View File

@ -42,6 +42,7 @@
color: #0078AE;
font-size: 14px;
font-weight: bold;
border-width: 0px;
}
#logdialog input{
@ -457,37 +458,26 @@ legend {
/*** Table ***/
.datatable {
width: 100%;
border-width: 1px;
border: solid 1px #BDBDBD;
border-spacing: 0px;
border-style: solid;
border-color: #BDBDBD;
border-collapse: collapse;
display: inline-table;
}
.datatable th {
.datatable th,td {
font: 12px verdana, arial, helvetica, sans-serif;
color: #424242;
padding: 10px;
background-color: #F2F2F2;
border-width: 1px;
border-style: solid;
border-color: #BDBDBD;
padding: 5px 0px;
white-space: nowrap; /* Do not use word wrap */
border: solid 1px #BDBDBD;
vertical-align: middle;
text-align: center;
min-width: 30px;
}
.datatable td {
font: 12px verdana, arial, helvetica, sans-serif;
color: #424242;
padding: 6px 12px;
white-space: nowrap; /* Do not use word wrap */
border-width: 1px;
border-style: solid;
border-color: #BDBDBD;
vertical-align: middle;
.datatable th {
font: bold 12px verdana, arial, helvetica, sans-serif;
background-color: #F2F2F2;
border-width: 0px;
}
/*** Row color (odd) ***/
@ -540,6 +530,10 @@ legend {
background-color: #E6E6E6;
}
.sorting_asc,.sorting_desc,.sorting {
background: none;
}
/*--------------- jQuery context menu ---------------*/
.context-menu-theme-vista {
background: #FAFAFA url(../images/contextmenu/context-menu-bg.gif) repeat-y left top
@ -841,4 +835,13 @@ table a:hover {
font: normal bold 15px verdana, arial, helvetica, sans-serif;
text-align: center;
border: none;
}
/*--------------- jqPlot Pie legend ---------------*/
td.jqplot-table-legend {
border-width: 0px;
}
td.jqplot-table-legend > div {
border-width: 0px;
}

View File

@ -132,7 +132,7 @@ bladePlugin.prototype.loadProvisionPage = function(tabId) {
var provForm = $('<div class="form"></div>');
// Create info bar
var infoBar = createInfoBar('Provision a blade');
var infoBar = createInfoBar('Provision a blade. This will install an operating system onto the blade.');
provForm.append(infoBar);
// Append to provision tab

View File

@ -133,7 +133,7 @@ ipmiPlugin.prototype.loadProvisionPage = function(tabId) {
var provForm = $('<div class="form"></div>');
// Create info bar
var infoBar = createInfoBar('Provision an iDataPlex.');
var infoBar = createInfoBar('Provision an iDataPlex. This will install an operating system onto the iDataPlex.');
provForm.append(infoBar);
// Append to provision tab

View File

@ -103,12 +103,12 @@ function loadPieSummary(){
$('#nodes').append('<h3>Cluster Summary</h3><hr/>');
var summaryTable = '<table>' +
'<tr>' +
'<td><div id="ospie" class="summarypie"></div></td>' +
'<td><div id="archpie" class="summarypie"></div></td>' +
'<td style="border: 0px;"><div id="ospie" class="summarypie"></div></td>' +
'<td style="border: 0px;"><div id="archpie" class="summarypie"></div></td>' +
'</tr>' +
'<tr>' +
'<td><div id="provmethodpie" class="summarypie"></td>' +
'<td><div id="nodetypepie" class="summarypie"></div></td>' +
'<td style="border: 0px;"><div id="provmethodpie" class="summarypie"></td>' +
'<td style="border: 0px;"><div id="nodetypepie" class="summarypie"></div></td>' +
'</tr></table>';
$('#nodes').append(summaryTable);
@ -489,6 +489,9 @@ function loadSubgroups(data) {
* @return Nothing
*/
function loadNodes(data) {
// Clear the tab before inserting the table
$('#nodesTab').children().remove();
// Data returned
var rsp = data.rsp;
// Group name
@ -548,7 +551,7 @@ function loadNodes(data) {
var sorted = new Array();
for (var key in headers) {
// Do not put comments and status in twice
if (key != 'usercomment' && key != 'status' && key.indexOf('statustime') < 0) {
if (key != 'usercomment' && key != 'status' && key.indexOf('status') < 0) {
sorted.push(key);
}
}
@ -631,7 +634,7 @@ function loadNodes(data) {
var key = sorted[i];
// Do not put comments and status in twice
if (key != 'usercomment' && key != 'status' && key.indexOf('statustime') < 0) {
if (key != 'usercomment' && key != 'status' && key.indexOf('status') < 0) {
var val = attrs[node][key];
if (val) {
row.push(val);
@ -844,7 +847,12 @@ function loadNodes(data) {
// Turn table into a datatable
var nodesDatatable = $('#' + nodesTableId).dataTable({
'iDisplayLength': 50,
'bLengthChange': false
'bLengthChange': false,
"sScrollX": "100%",
"bAutoWidth": true,
"fnInitComplete": function() {
adjustColumnSize();
}
});
// Filter table when enter key is pressed
@ -874,19 +882,20 @@ function loadNodes(data) {
var cols = $('#' + nodesTableId + ' thead tr th').click(function() {
getNodeAttrs(group);
});
var pingCol = $('#' + nodesTableId + ' thead tr th').eq(2);
var powerCol = $('#' + nodesTableId + ' thead tr th').eq(3);
var monitorCol = $('#' + nodesTableId + ' thead tr th').eq(4);
var commentCol = $('#' + nodesTableId + ' thead tr th').eq(5);
var checkboxCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(0)');
var pingCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
var powerCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(3)');
var monitorCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(4)');
var commentCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(5)');
checkboxCol.unbind('click');
pingCol.unbind('click');
powerCol.unbind('click');
monitorCol.unbind('click');
commentCol.unbind('click');
// Create enough space for loader to be displayed
// Center align power, ping, and comments
$('#' + nodesTableId + ' td:nth-child(3),td:nth-child(4),td:nth-child(5)').css({
'min-width': '65px',
'text-align': 'center'
});
@ -1006,7 +1015,7 @@ function loadNodes(data) {
});
} else {
// Hide status loader
var statCol = $('#' + nodesTableId + ' thead tr th').eq(2);
var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
statCol.find('img').hide();
}
@ -1271,7 +1280,6 @@ function addNodes2Table(data) {
/**
* Enable editable columns
*/
alert('I am here');
// Do not make 1st, 2nd, 3rd, 4th, 5th, or 6th column editable
$('#' + nodesTableId + ' td:not(td:nth-child(1),td:nth-child(2),td:nth-child(3),td:nth-child(4),td:nth-child(5),td:nth-child(6))').editable(
function(value, settings) {
@ -1337,7 +1345,7 @@ function addNodes2Table(data) {
});
} else {
// Hide status loader
var statCol = $('#' + nodesTableId + ' thead tr th').eq(2);
var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
statCol.find('img').hide();
}
@ -1373,8 +1381,9 @@ function loadGangliaStatus(data) {
}
// Hide Ganglia loader
var gangliaCol = $('#' + nodesTableId + ' thead tr th').eq(4);
var gangliaCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(4)');
gangliaCol.find('img').hide();
adjustColumnSize();
}
/**
@ -1386,7 +1395,7 @@ function loadGangliaStatus(data) {
*/
function refreshGangliaStatus(group) {
// Show ganglia loader
var gangliaCol = $('#' + nodesTableId + ' thead tr th').eq(4);
var gangliaCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(4)');
gangliaCol.find('img').show();
// Get power status for nodes shown
@ -1433,8 +1442,9 @@ function loadPowerStatus(data) {
}
// Hide power loader
var powerCol = $('#' + nodesTableId + ' thead tr th').eq(3);
var powerCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(3)');
powerCol.find('img').hide();
adjustColumnSize();
}
/**
@ -1448,7 +1458,7 @@ function loadPowerStatus(data) {
*/
function refreshPowerStatus(group, tableId) {
// Show power loader
var powerCol = $('#' + tableId + ' thead tr th').eq(3);
var powerCol = $('#' + tableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(3)');
powerCol.find('img').show();
// Get power status for nodes shown
@ -1497,8 +1507,9 @@ function loadNodeStatus(data) {
}
// Hide status loader
var statCol = $('#' + nodesTableId + ' thead tr th').eq(2);
var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)');
statCol.find('img').hide();
adjustColumnSize();
}
/**
@ -3409,4 +3420,15 @@ function provisionStopCheck(){
else{
provisionClock = setTimeout('provisionStopCheck()', 5000);
}
}
/**
* Adjust datatable column size
*/
function adjustColumnSize() {
var cols = $('#' + nodesTableId).find('tbody tr:eq(0) td');
for (var i in cols) {
var header = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th').eq(i);
header.css('width', cols.eq(i).outerWidth());
}
}

View File

@ -28,7 +28,7 @@ function loadPage(){
'<body>
<div id="header">
<ul>
<li><img src="images/logo.gif" height="100%"/></li>
<li><img src="images/logo.gif" height="100%" style="margin-right: 60px;"/></li>
<li><a href="index.php" class="top_link">Nodes</a></li>
<li><a href="configure.php" class="top_link">Configure</a></li>
<li><a href="provision.php" class="top_link">Provision</a></li>