From 9f82fb465441cbe8159aa7e93295d3faa3e3c9ef Mon Sep 17 00:00:00 2001 From: phamt Date: Fri, 9 Sep 2011 21:56:30 +0000 Subject: [PATCH] Enable scrollable table on images page. Cleaned up code. git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10492 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd --- xCAT-UI/js/configure/configure.js | 5 +-- xCAT-UI/js/nodes/nodes.js | 24 ++++++----- xCAT-UI/js/provision/images.js | 72 ++++++++++++++++++------------- xCAT-UI/js/provision/provision.js | 20 ++++++--- 4 files changed, 70 insertions(+), 51 deletions(-) diff --git a/xCAT-UI/js/configure/configure.js b/xCAT-UI/js/configure/configure.js index 1ccd52642..e3a05ecda 100644 --- a/xCAT-UI/js/configure/configure.js +++ b/xCAT-UI/js/configure/configure.js @@ -291,10 +291,7 @@ function loadTable(data) { 'iDisplayLength': 50, 'bLengthChange': false, "sScrollX": "100%", - "bAutoWidth": true, - "fnInitComplete": function() { - - } + "bAutoWidth": true }); // Create action bar diff --git a/xCAT-UI/js/nodes/nodes.js b/xCAT-UI/js/nodes/nodes.js index 1e5be3d64..19894c437 100644 --- a/xCAT-UI/js/nodes/nodes.js +++ b/xCAT-UI/js/nodes/nodes.js @@ -862,7 +862,7 @@ function loadNodes(data) { "sScrollX": "100%", "bAutoWidth": true, "fnInitComplete": function() { - adjustColumnSize(); + adjustColumnSize(nodesTableId); } }); @@ -1040,7 +1040,7 @@ function loadNodes(data) { // Hide status loader var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)'); statCol.find('img').hide(); - adjustColumnSize(); + adjustColumnSize(nodesTableId); } if (undefined == nodeAttrs){ @@ -1385,7 +1385,7 @@ function addNodes2Table(data) { * Additional ajax requests need to be made for zVM */ advancedLoad(group); - adjustColumnSize(); + adjustColumnSize(nodesTableId); } /** @@ -1416,7 +1416,7 @@ function loadGangliaStatus(data) { // Hide Ganglia loader var gangliaCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(4)'); gangliaCol.find('img').hide(); - adjustColumnSize(); + adjustColumnSize(nodesTableId); } /** @@ -1477,7 +1477,7 @@ function loadPowerStatus(data) { // Hide power loader var powerCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(3)'); powerCol.find('img').hide(); - adjustColumnSize(); + adjustColumnSize(nodesTableId); } /** @@ -1542,7 +1542,7 @@ function loadNodeStatus(data) { // Hide status loader var statCol = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th:eq(2)'); statCol.find('img').hide(); - adjustColumnSize(); + adjustColumnSize(nodesTableId); } /** @@ -2121,7 +2121,7 @@ function updatePowerStatus(data) { } // Adjust datatable column size - adjustColumnSize(); + adjustColumnSize(nodesTableId); } /** @@ -3323,17 +3323,19 @@ function jump2Provision(tgtNodes){ /** * Adjust datatable column size * + * @param tableId + * Table ID * @return Nothing */ -function adjustColumnSize() { - var cols = $('#' + nodesTableId).find('tbody tr:eq(0) td'); +function adjustColumnSize(tableId) { + var cols = $('#' + tableId).find('tbody tr:eq(0) td'); // If the column size is zero, wait until table is initialized if (!cols.eq(1).outerWidth()) { - adjustColumnSize(); + adjustColumnSize(tableId); } else { for (var i in cols) { - var headers = $('#' + nodesTableId + '_wrapper .dataTables_scrollHead .datatable thead tr th').eq(i); + var headers = $('#' + tableId + '_wrapper .dataTables_scrollHead .datatable thead tr th').eq(i); headers.css('width', cols.eq(i).outerWidth()); } } diff --git a/xCAT-UI/js/provision/images.js b/xCAT-UI/js/provision/images.js index 51a87938e..4c1610bd3 100644 --- a/xCAT-UI/js/provision/images.js +++ b/xCAT-UI/js/provision/images.js @@ -3,6 +3,7 @@ */ var origAttrs = new Object(); // Original image attributes var defAttrs; // Definable image attributes +var imgTableId = 'imagesDatatable'; // Images datatable ID /** * Load images page @@ -84,7 +85,7 @@ function loadImages(data) { sorted.unshift('', 'imagename'); // Create a datatable - var dTable = new DataTable('imagesDataTable'); + var dTable = new DataTable(imgTableId); dTable.init(sorted); // Go through each image @@ -124,62 +125,75 @@ function loadImages(data) { * copy Linux distribution and edit image properties */ - // Create copy Linux button - var copyLinuxBtn = createButton('Copy CD'); - copyLinuxBtn.bind('click', function(event) { + // Create copy CD link + var copyCDLnk = $('Copy CD'); + copyCDLnk.click(function() { loadCopyCdPage(); }); - // Create new button - var newBtn = createButton("Create Image"); - newBtn.bind('click',function(event){ + // Create image link + var newLnk = $('Create image'); + newLnk.click(function() { loadCreateImage(); }); - // Create edit button - var editBtn = createButton('Edit'); - editBtn.bind('click', function(event){ - var tgtImages = getNodesChecked('imagesDataTable').split(','); + // Create edit link + var editBtn = $('Edit'); + editBtn.click(function() { + var tgtImages = getNodesChecked(imgTableId).split(','); for (var i in tgtImages) { loadEditImagePage(tgtImages[i]); } }); - - /** - * Create an action bar - */ - var actionsBar = $('
').css('margin', '10px 0px'); - actionsBar.append(copyLinuxBtn); - actionsBar.append(newBtn); - actionsBar.append(editBtn); - $('#imagesTab').append(actionsBar); // Insert table $('#imagesTab').append(dTable.object()); // Turn table into a datatable - var myDataTable = $('#imagesDataTable').dataTable({ - 'iDisplayLength': 50 + var myDataTable = $('#' + imgTableId).dataTable({ + 'iDisplayLength': 50, + 'bLengthChange': false, + "sScrollX": "100%", + "bAutoWidth": true, + "fnInitComplete": function() { + adjustColumnSize(imgTableId); + } }); // Set datatable width - $('#imagesDataTable_wrapper').css({ - 'width': '880px', - 'margin': '0px' + $('#' + imgTableId + '_wrapper').css({ + 'width': '880px' }); + // Actions + var actionBar = $('
'); + var actionsLnk = 'Actions'; + var actsMenu = createMenu([copyCDLnk, newLnk, editBtn]); + + // Create an action menu + var actionsMenu = createMenu([ [ actionsLnk, actsMenu ] ]); + actionsMenu.superfish(); + actionsMenu.css('display', 'inline-block'); + actionBar.append(actionsMenu); + + // Create a division to hold actions menu + var menuDiv = $(''); + $('#' + imgTableId + '_wrapper').prepend(menuDiv); + menuDiv.append(actionBar); + $('#' + imgTableId + '_filter').appendTo(menuDiv); + /** * Enable editable columns */ // Do not make 1st, 2nd, 3rd, 4th, or 5th column editable - $('#imagesDataTable td:not(td:nth-child(1),td:nth-child(2))').editable( + $('#' + imgTableId + ' td:not(td:nth-child(1),td:nth-child(2))').editable( function(value, settings) { // Get column index var colPos = this.cellIndex; // Get row index - var dTable = $('#imagesDataTable').dataTable(); + var dTable = $('#' + imgTableId).dataTable(); var rowPos = dTable.fnGetPosition(this.parentNode); // Update datatable @@ -189,7 +203,7 @@ function loadImages(data) { var image = $(this).parent().find('td:eq(1)').text(); // Get table headers - var headers = $('#imagesDataTable thead tr th'); + var headers = $('#' + imgTableId).parents('.dataTables_scroll').find('.dataTables_scrollHead thead tr:eq(0) th'); // Get attribute name var attrName = jQuery.trim(headers.eq(colPos).text()); @@ -276,13 +290,13 @@ function setImageDefAttrs(data) { /** * Load create image page * - * @param Nothing * @return Nothing */ function loadCreateImage() { // Get nodes tab var tab = getProvisionTab(); var tabId = 'createImageTab'; + // Generate new tab ID if ($('#' + tabId).size()) { tab.select(tabId); diff --git a/xCAT-UI/js/provision/provision.js b/xCAT-UI/js/provision/provision.js index 26c581cde..acf2884b2 100644 --- a/xCAT-UI/js/provision/provision.js +++ b/xCAT-UI/js/provision/provision.js @@ -76,7 +76,7 @@ function loadProvisionPage() { provPg.append(infoBar); // Create provision tab - var tab = new Tab(); + var tab = new Tab('provisionPageTabs'); setProvisionTab(tab); tab.init(); $('#content').append(tab.object()); @@ -140,14 +140,20 @@ function loadProvisionPage() { // Add provision tab tab.add('provisionTab', 'Provision', provPg, false); - // Add image tab - var loader = $('
').append(createLoader('')); - tab.add('imagesTab', 'Images', loader, false); - loadImagesPage(); + tab.add('imagesTab', 'Images', '', false); - //should open the quick provision tab - if (window.location.search){ + // Load tabs onselect + $('#provisionPageTabs').bind('tabsselect', function(event, ui){ + // Load image page + if (!$('#imagesTab').children().length && ui.index == 1) { + $('#imagesTab').append($('
').append(createLoader(''))); + loadImagesPage(); + } + }); + + // Open the quick provision tab + if (window.location.search) { tab.add('quickProvisionTab', 'Quick Provision', '', true); tab.select('quickProvisionTab');