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:
parent
177a2971fb
commit
9f82fb4654
@ -291,10 +291,7 @@ function loadTable(data) {
|
||||
'iDisplayLength': 50,
|
||||
'bLengthChange': false,
|
||||
"sScrollX": "100%",
|
||||
"bAutoWidth": true,
|
||||
"fnInitComplete": function() {
|
||||
|
||||
}
|
||||
"bAutoWidth": true
|
||||
});
|
||||
|
||||
// Create action bar
|
||||
|
@ -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());
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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');
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user