mirror of
				https://github.com/xcat2/xcat-core.git
				synced 2025-10-28 18:05:31 +00:00 
			
		
		
		
	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:
		| @@ -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'); | ||||
| 	     | ||||
|   | ||||
		Reference in New Issue
	
	Block a user