From 752cdb1ddaa3feacd977251f25f3a3f5d8ffc12b Mon Sep 17 00:00:00 2001 From: phamt Date: Wed, 24 Aug 2011 03:10:37 +0000 Subject: [PATCH] Enable scrollable datatable header. git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10349 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd --- xCAT-UI/css/style.css | 43 +++++++++++++------------ xCAT-UI/js/custom/blade.js | 2 +- xCAT-UI/js/custom/ipmi.js | 2 +- xCAT-UI/js/nodes/nodes.js | 64 +++++++++++++++++++++++++------------- xCAT-UI/lib/ui.php | 2 +- 5 files changed, 69 insertions(+), 44 deletions(-) diff --git a/xCAT-UI/css/style.css b/xCAT-UI/css/style.css index 6ee975199..d6b23584d 100644 --- a/xCAT-UI/css/style.css +++ b/xCAT-UI/css/style.css @@ -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; } \ No newline at end of file diff --git a/xCAT-UI/js/custom/blade.js b/xCAT-UI/js/custom/blade.js index b2bb70d97..4d0fc9e57 100644 --- a/xCAT-UI/js/custom/blade.js +++ b/xCAT-UI/js/custom/blade.js @@ -132,7 +132,7 @@ bladePlugin.prototype.loadProvisionPage = function(tabId) { var provForm = $('
'); // 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 diff --git a/xCAT-UI/js/custom/ipmi.js b/xCAT-UI/js/custom/ipmi.js index 3b249836e..37df012e5 100644 --- a/xCAT-UI/js/custom/ipmi.js +++ b/xCAT-UI/js/custom/ipmi.js @@ -133,7 +133,7 @@ ipmiPlugin.prototype.loadProvisionPage = function(tabId) { var provForm = $('
'); // 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 diff --git a/xCAT-UI/js/nodes/nodes.js b/xCAT-UI/js/nodes/nodes.js index 94992c6f6..ff5712f5d 100644 --- a/xCAT-UI/js/nodes/nodes.js +++ b/xCAT-UI/js/nodes/nodes.js @@ -103,12 +103,12 @@ function loadPieSummary(){ $('#nodes').append('

Cluster Summary

'); var summaryTable = '' + '' + - '' + - '' + + '' + + '' + '' + '' + - '' + - '' + + '' + + '' + '
'; $('#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()); + } } \ No newline at end of file diff --git a/xCAT-UI/lib/ui.php b/xCAT-UI/lib/ui.php index 6e14f3387..39bd901d7 100644 --- a/xCAT-UI/lib/ui.php +++ b/xCAT-UI/lib/ui.php @@ -28,7 +28,7 @@ function loadPage(){ '