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
This commit is contained in:
phamt 2011-09-09 21:56:30 +00:00
parent 177a2971fb
commit 9f82fb4654
4 changed files with 70 additions and 51 deletions

View File

@ -291,10 +291,7 @@ function loadTable(data) {
'iDisplayLength': 50,
'bLengthChange': false,
"sScrollX": "100%",
"bAutoWidth": true,
"fnInitComplete": function() {
}
"bAutoWidth": true
});
// Create action bar

View File

@ -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());
}
}

View File

@ -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('<input type="checkbox" onclick="selectAllCheckbox(event, $(this))">', '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 = $('<a>Copy CD</a>');
copyCDLnk.click(function() {
loadCopyCdPage();
});
// Create new button
var newBtn = createButton("Create Image");
newBtn.bind('click',function(event){
// Create image link
var newLnk = $('<a>Create image</a>');
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 = $('<a>Edit</a>');
editBtn.click(function() {
var tgtImages = getNodesChecked(imgTableId).split(',');
for (var i in tgtImages) {
loadEditImagePage(tgtImages[i]);
}
});
/**
* Create an action bar
*/
var actionsBar = $('<div></div>').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 = $('<div class="actionBar"></div>');
var actionsLnk = '<a>Actions</a>';
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 = $('<div id="' + imgTableId + '_menuDiv" class="menuDiv"></div>');
$('#' + 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);

View File

@ -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 = $('<center></center>').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($('<center></center>').append(createLoader('')));
loadImagesPage();
}
});
// Open the quick provision tab
if (window.location.search) {
tab.add('quickProvisionTab', 'Quick Provision', '', true);
tab.select('quickProvisionTab');